How can I open select box on focus?

Question

I want to open a select box when it gets focus. I'm using React hooks with useRef.

I found several solutions with using ref.current.click(). But it is not working as expected. Am I doing something wrong?

Here is the simplified code:

import {useRef, forwardRef} from 'react';

export default function App() {

  const ref = useRef(null);

  return (
    <div className="App">
      <input type="text" name="text" value="" onChange={(e) => console.log(e)} />
      <br />
      <br />
      <SelectBox 
        ref={ref}
      />
    </div>
  );
}

const SelectBox = forwardRef((props, ref) => {
  function onFocus() {
    if(ref.current) {
      ref.current.click();
    }
  }

  return (
    <select
      ref={ref}
      onChange={(e) => console.log(e)}
      onFocus={onFocus}
    >
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
    </select>
  )
});

Or are there other solutions to open the select box (show options) on focus?

Answer 1

You can use this:

// Function to focus the select element
const openSelect = () => {
    if (selectRef.current) {
        selectRef.current.showPicker();
    }
};

Answer 2

First Option

set up your component to use useRef

to hold a reference to the element. You'll also use event handlers (onFocus and onBlur) to manage the visibility of the select box.

import React, { useRef, useState } from 'react';

const SelectComponent = () => {
  const selectRef = useRef(null);
  const [isFocused, setIsFocused] = useState(false);

  const handleFocus = () => {
    setIsFocused(true);
  };

  const handleBlur = () => {
    setIsFocused(false);
  };

  return (
    <div>
      <select
        ref={selectRef}
        onFocus={handleFocus}
        onBlur={handleBlur}
        style={{ display: isFocused ? 'block' : 'none' }}
      >
        {/* Add your <option> elements here */}
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
    </div>
  );
};

export default SelectComponent;

Explanation:

• useRef(null) initializes a reference (selectRef) to null.
• useState(false) sets up a state variable (isFocused) to keep track of whether the select box is focused or not.
• handleFocus and handleBlur are event handlers to toggle the isFocused state based on focus and blur events of the element.
• The element uses the ref={selectRef} attribute to assign the reference to the select box.

Simply use in your parent component wherever you want to render this select box.

import React from 'react';
import SelectComponent from './SelectComponent';

const App = () => {
  return (
    <div>
      <h1>Select Box Example</h1>
      <SelectComponent />
    </div>
  );
};

export default App;

---

Second Option

you'll use useRef, forwardRef, and focus() to manage the focus behavior of the element.

import React, { useRef, forwardRef } from 'react';

export default function App() {
  const selectRef = useRef(null);

  return (
    <div className="App">
      <input type="text" name="text" value="" onChange={(e) => console.log(e)} />
      <br />
      <br />
      <SelectBox ref={selectRef} />
    </div>
  );
}

const SelectBox = forwardRef((props, ref) => {
  const handleFocus = () => {
    if (ref && ref.current) {
      ref.current.focus(); // Focus the <select> element
    }
  };

  return (
    <select
      ref={ref}
      onChange={(e) => console.log(e)}
      onFocus={handleFocus}
    >
      <option value="1">Test 1</option>
      <option value="2">Test 2</option>
    </select>
  );
});

This setup ensures that when the box inside SelectBox receives focus (either by direct click or by navigating through keyboard), it will programmatically focus itself, effectively opening the dropdown menu associated with the element. You can further extend and style this code based on your requirements.

---

Third Option

To achieve the behavior of opening a box automatically when it receives focus, you can use a combination of useRef, useEffect, and forwardRef in a React functional component.

The idea is to programmatically open the dropdown when it gains focus by setting its size attribute temporarily to a value greater than 1

import React, { useRef, useEffect, forwardRef, useState } from 'react';

const SelectWithFocusOpen = forwardRef((props, ref) => {
  const [isFocused, setIsFocused] = useState(false);

  // Function to handle focus event
  const handleFocus = () => {
    setIsFocused(true);
  };

  // Function to handle blur event
  const handleBlur = () => {
    setIsFocused(false);
  };

  // Effect to adjust the select size based on focus state
  useEffect(() => {
    if (ref.current) {
      ref.current.size = isFocused ? 4 : 1; // Change size to expand dropdown when focused
    }

    // Restore select size to normal when component unmounts or loses focus
    return () => {
      if (ref.current) {
        ref.current.size = 1;
      }
    };
  }, [isFocused, ref]);

  return (
    <select
      ref={ref}
      onChange={(e) => console.log(e.target.value)}
      onFocus={handleFocus}
      onBlur={handleBlur}
    >
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
  );
});

export default SelectWithFocusOpen;

To use this SelectWithFocusOpen component in your application, import and render it as needed.

import React from 'react';
import SelectWithFocusOpen from './SelectWithFocusOpen';

const App = () => {
  return (
    <div className="App">
      <h1>Select Box Example</h1>
      <SelectWithFocusOpen />
    </div>
  );
};

export default App;

Happy Coding....

Answer 3

There is a native way to open select, and its by calling showPicker(). You can achieve it by doing something like this:

const ref = useRef();

  const handleFocus = () => {
    ref.current?.showPicker();
  };

  return (
    <select ref={ref} onFocus={handleFocus}>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
  );

However there are some thing to be noted:

• showPicker() needs a transient user activation. This means that the user has to interact with the page or a UI element in order for this feature to work.
• You can't use showPicker() on a component inside cross-origin frame since they would cause SecurityError as stated in the docs. This means that using CodePen or CodeSandbox to try this might not resulting the expected outcome.

MDN reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker

Answer 4

Behavior of opening select box is controlled by the browser. So, you are finding difficulty in opening select box using ref but you can use alternatives to achieve this functionality. Here are the codes which works for me.

        const SelectBox = forwardRef((props, ref) => {
      const [isOpen, setIsOpen] = useState(false);

      const handleFocus = () => {
        setIsOpen(true);
      };

      const handleBlur = () => {
        setIsOpen(false);
      };

      return (
        <select
          ref={ref}
          onChange={(e) => console.log(e)}
          onFocus={handleFocus}
          onBlur={handleBlur}
          size={isOpen ? 3 : 1} // change this as per your number of options
        >
          <option value="1">Test 1</option>
          <option value="2">Test 2</option>
          <option value="3">Test 3</option>
        </select>
      );
    });