How can I trigger opening a select form's options on click of another button in react? I have tried using a ref but its not working

Question

Here is my select form:

<form ref={skuSelectRef}>
    <label htmlFor="size" />
    <select
        id="size"
        value={selectedSKU}
        onChange={() => changeSKU(size.options[size.selectedIndex].value)}
    >
        <option value="default">
            {outOfStock ? 'OUT OF STOCK' : 'SELECT SIZE'}
        </option>
        {availableSizes.map((size, i) => (
            <option key={i} value={size}>
                {size}
            </option>
        ))}
    </select>
</form>

The button that when I click I would like for the select form above to open:

<div className="a2cbtn">
    <button onClick={onAddToCartClick} id="a2cbtn">
        <span>ADD TO CART</span>
    </button>
</div>

Both of the above components are in my AddToCart subcomponent. Here is a snippet of the button click handler in the parent component where I am trying to make the select form open:

if (this.state.selectedSKU === 'default') {
    this.skuSelectRef.current.click();
    console.log(this.skuSelectRef);
    console.log('clicked');
}

It seems that the ref is properly created because I am getting {current: form} logged to the console and the click is working as I'm getting "clicked" logged to the console as well. However the select form is not opening!

At first I tried having the ref in my select element instead of form but then when I clicked the button it gave me an error saying that the function click doesn't exist so I moved the ref to the form element enclosing it and now I am not getting that error but it is still not opening.

I have tried this.skuSelectRef.current.focus() and this.skuSelectRef.current.select() as well to no avail.

Any ideas?

I would create a useState like 'formEnabled', control its state onclick Button and with this variable i could show/or not the form based on click. You need to set this using Ref? — Luis Paulo Pinto, Aug 12 '20 at 23:30
@LuisPauloPinto The question is how to actually show the form..? — Kushh, Aug 13 '20 at 00:03
Yes, i would do that with a useState variable to control the form visibility. — Luis Paulo Pinto, Aug 13 '20 at 00:06
Your form and 'Add Cart' button are in the same component, right? If you click the button you toggle the visibility of the form, its that what you want? — Luis Paulo Pinto, Aug 13 '20 at 00:13
@LuisPauloPinto Yes....the question is how do you actually trigger the select form opening programatically? Obviously you can open it if you click on it in the browser but how I can open it on a click of another button? I can use state all I want to control whether it should be variable or not but that doesn't answer my question of HOW to open the form — Kushh, Aug 13 '20 at 03:02
Maybe this could help you: [how-to-show-a-form-in-the-same-window-on-onclick-event-of-a-button-in-react-js](https://stackoverflow.com/questions/58605846/how-to-show-a-form-in-the-same-window-on-onclick-event-of-a-button-in-react-js) — Luis Paulo Pinto, Aug 13 '20 at 12:10

score 0 · Answer 1 · answered Oct 24 '20 at 00:58

If you want to focus the select when clicking the button, that can be done with refs. It's not working for you because you attached the ref to the form element and you need to be attaching it to the select element directly.

const skuSelectRef = createRef();

const onAddToCartClick = () => {
    if (size === "default") {
        skuSelectRef.current?.focus();
    }
};

<select ref={skuSelectRef} ....

CodeSandbox Link

If you want to open the select element, that's tough. There is no open() method like there is for focus(). There's a whole discussion about how to do it on this question. But I would recommend that you not reinvent the wheel. There are lots of libraries for form and UI components that can do this via a boolean open prop. Material UI is one of the biggest. Here is their demo for a controlled open.

How can I trigger opening a select form's options on click of another button in react? I have tried using a ref but its not working

1 Answers1