Selecting react-select option causes page to jump

I am having some issues with a mobile modal I have been working on that uses react-select.

The selectors shown below are inside of a div with a fixed height and overflow-y: scroll. Whenever I selected an option for the select ‘Choose observer’, the entire modal will jump down in the viewport (shown in the last picture) for a split second, then return to normal. This will be quite jarring for the end user and it’s an issue I would like to get fixed.

This only happens in certain screen orientations. On ipad it is in landscape mode and on iphone it is both orientations. This leads me to believe it is due to the height of the container but theres not much I can do about that as there is the header and navigation tabs.

I have tried several solutions including:

menuPosition=”fixed”

blurInputOnSelect={false}

menuShouldScrollIntoView={false}

<Selector
  ignoreAccents={false}
  menuPortalTarget={menuPortalTarget}
  components={{ DropdownIndicator }}
  className={className}
  options={options}
  formatGroupLabel={CustomGroup}
  isClearable={isClearable}
  isDisabled={disabled}
  styles={selectStyles}
  placeholder={placeholder}
  isSearchable={true}
  getOptionValue={getOptionValue}
  getOptionLabel={getOptionLabel}
  onChange={onSelectedChange}
  defaultValue={initialSelected}
  controlShouldRenderValue={false}
  filterOption={customFilter}
  onCreateOption={onCreateOption}
  menuPlacement={menuPlacement}
  openMenuOnFocus={autoFocus}
  autoFocus={!isMobileOrTabletDevice}
  menuIsOpen
  ref={(e) => (selectRef.current = e)}
  id={id}
  formatOptionLabel={formatOptionLabel}
  isMulti={isMulti}
  hideSelectedOptions
/>

const selectStyles = {
  control: (provided) => ({
    ...provided,
    margin: 8,
    ...props.controlStyle,
  }),
  menu: () => ({ borderTopRightRadius: 0, borderTopLeftRadius: 0 }),
  menuList: (provided) => ({
    ...provided,
    maxHeight: '185px',
  }),
  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
};

If someone could point my in the right direction on how to fix this behavior that would be greatly appreciated. Thank you in advance.

Edit: So i’ve done some more investigating, and I believe the crux of the issue is that when selecting react select wants to scroll what you just selected into view. With the way I have my modal setup it is a fullscreen modal that overlays on top of a page that is larger than the viewport. When the modal opens I turn overflow hidden and height 100% to the body, but when selecting it still scrolls the page behind the modal.

Answer

menuShouldScrollIntoView ={false} adding this props into react-select solved my problem.

Advertisement

Answer