ReactJS how to close select dropdown on state change-CodePudding

I have doubts how to close the select dropdown on screen orientation change. For now I have the listener that handles the state when the orientation is changed:

const [orientation, setOrientation] = useState('portrait');

useEffect(() => {
    window.addEventListener('orientationchange', setScreenOrientation)
    return () => {
      document.removeEventListener('orientationchange', setScreenOrientation)
    }
  }, [])



const setScreenOrientation = () => {
    if(window.matchMedia("(orientation: portrait)").matches){
      console.log('orientation: portrait');
      setOrientation('portrait');
    }

    if(window.matchMedia("(orientation: landscape)").matches){
      console.log('orientation: landscape');
      setOrientation('landscape');
    }
  }

 return (<Dropdown
          options={data}
          center
          onSelect={handleSelect}
          value={data.store_id}
          selected="key"
          screenOrientation={screenOrientation}
        />)

Dropdown component

import React, { useEffect } from 'react';
import classnames from 'classnames';
import styles from './styles.module.scss';

export const Dropdown = ({
  options,
  center,
  onSelect,
  value,
  selected,
  screenOrientation
}) => {

  return (
    <div
      className={classnames(
        styles.dropdown
      )}
    >
      <select
        onChange={onSelect}
        value={value}
      >
        {options && 
          Object.entries(options)
            .map(([k, v]) => (
              <option
                key={v}
                value={selected === 'key' ? k : v}
              >
                {v}
              </option>
            ))}
      </select>
    </div>
  );
};

But I don't know how to imlement this functionality when the screen is changed to close the dropdown if it's opened?

Thanks in advance.

CodePudding user response：

Use the orientation variable in the bracket

    useEffect(() => {
        window.addEventListener('orientationchange', setScreenOrientation)
        return () => {
             document.removeEventListener('orientationchange', setScreenOrientation)       
     }
     }, [orientation])

CodePudding user response：

First of all, pass the state "orientation" as props to your Dropdown component.

 return (<Dropdown
          options={data}
          center
          onSelect={handleSelect}
          value={data.store_id}
          selected="key"
          orientation={orientation}
        />)

Then you will have to add a "ref" to your select component. With the "ref" you will be able to call the .onBlur() method whenever the orientation changes. To do that you will also need an useEffect();

import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import styles from './styles.module.scss';

export const Dropdown = ({
  options,
  center,
  onSelect,
  value,
  selected,
  orientation
}) => {

  const ref = useRef();

  useEffect(() => {
     if(ref.current)
        ref.current.blur();
  }, [orientation]);

  return (
    <div
      className={classnames(
        styles.dropdown
      )}
    >
      <select
        onChange={onSelect}
        value={value}
        ref={ref}
      >
        {options && 
          Object.entries(options)
            .map(([k, v]) => (
              <option
                key={v}
                value={selected === 'key' ? k : v}
              >
                {v}
              </option>
            ))}
      </select>
    </div>
  );
};