React Hooks Form Reset dont set Select to initial value

Question

When clicking Reset, form should go back to initial values, but the Select element goes back to first option available, have used the same method for all other form elements, and they update correctly.

Have made a Codesandbox example of the problem : https://codesandbox.io/s/lively-snowflake-tf5te

function App() {
  // Data for select dropdown box - selected is Lime
  const SelectData = ["Grapefruit", "Lime", "Coconut", "Mango"];

  // Selected Value
  const selectedValue = "Lime";

  // Set state
  const [selectBox, setSelectBox] = useState(selectedValue);

  // Submit finction
  const handleSubmit = e => {
    e.preventDefault();
    alert(`Select Selection #1: ${selectBox}`);
  };

  // Reset function
  const handleReset = () => {
    setSelectBox(selectedValue);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>
        When 'Reset' is clicked first options is selected
        <br />
        and not the state value.
      </h2>
      <form onSubmit={handleSubmit}>
        <Select
          label="Select Fruit"
          value={selectBox}
          handleChange={e => setSelectBox(e.target.value)}
          data={SelectData}
        />
        <br />
        <br />
        <input type="submit" value="Submit" />
        <input type="reset" value="Reset" onClick={handleReset} />
      </form>
      <br />
      Selectbox state value: {selectBox}
      <br />
    </div>
  );
}

Expected result, after Resetting Form, is that then Select element value is "Lime", but it is "Grapefruit".

Akhil Aravind · Accepted Answer · 2019-08-08 07:23:02Z

6

I changed the value to defaultValue in your DropDown.js file and it worked like charm. Check the sandbox

<select defaultValue={value} onChange={handleChange}>
            {data.map(item => (
              <option key={item} value={item}>
                {item}
              </option>
            ))}
          </select>

answered Aug 8, 2019 at 7:23

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cbdeveloper Over a year ago

Mee too. Apparently defaultValue is supposed to be used with uncontrolled components. But this one is controlled. reactjs.org/docs/uncontrolled-components.html#default-values

cbdeveloper Over a year ago

See that value is supposed to work in this case. But something else is happening. codesandbox.io/s/eloquent-elbakyan-w4ijq

Flemming Krog Olsen Over a year ago

Thanks for fast reply, work as intended with defaultValue

cbdeveloper · Accepted Answer · 2019-08-08 07:58:09Z

Your code is correct. Your "bug" is due to the <input type='reset'/>.

Change it to a regular button and you'll see that it works just fine.

<button onClick={handleReset}>Reset</button>

https://codesandbox.io/s/dark-cdn-qchu5

From MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.

This is concurring with your controlled component.

return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>
        When 'Reset' is clicked first options is selected
        <br />
        and not the state value.
      </h2>
      <form onSubmit={handleSubmit}>
        <Select
          label="Select Fruit"
          value={selectBox}
          handleChange={e => setSelectBox(e.target.value)}
          data={SelectData}
        />
        <br />
        <br />
        <input type="submit" value="Submit" />
        {/* <input type="reset" value="Reset" onClick={handleReset} /> */}
        <button onClick={handleReset}>Reset</button>
      </form>
      <br />
      Selectbox state value: {selectBox}
      <br />
    </div>
  );

Joseph D. · Accepted Answer · 2019-08-08 08:21:06Z

0

Even though select is a controlled component, Form doesn't support onReset event. Thus, the behavior is similar to $form.reset() which will reset the select value to default value when button of type=Reset is clicked.

So an alternative is to use defaultValue prop in select or use a normal button with onChange prop.

answered Aug 8, 2019 at 8:21

Joseph D.

12.2k4 gold badges40 silver badges72 bronze badges

Collectives™ on Stack Overflow

React Hooks Form Reset dont set Select to initial value

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related