Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calling form.reset does not clear Combobox value #940

Open
dorshinar opened this issue Jul 2, 2022 · 0 comments
Open

Calling form.reset does not clear Combobox value #940

dorshinar opened this issue Jul 2, 2022 · 0 comments
Labels
Status: Unreleased Issue addressed but not yet released

Comments

@dorshinar
Copy link

🐛 Bug report

Current Behavior

Calling form.reset() does not clear the value from the input in a Combobox. I've created a codesandbox to show it.
https://codesandbox.io/s/unruffled-bell-s7r3t8?file=/src/App.js

When I enter a value in the combobox and press "submit" the value remains, although the onSubmit event handler called event.currentTarget.reset().
Entering a value in a regular input and submitting the form behaves as expected.

Screen.Recording.2022-07-02.at.22.38.17.mov

This is the full reproduction code:

import "./styles.css";
import {
  Combobox,
  ComboboxInput,
  ComboboxPopover,
  ComboboxList,
  ComboboxOption
} from "@reach/combobox";
import "@reach/combobox/styles.css";

export default function App() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        event.currentTarget.reset();
      }}
    >
      <h4 id="demo">Basic, Fixed List Combobox</h4>
      <Combobox aria-labelledby="demo">
        <ComboboxInput />
        <ComboboxPopover>
          <ComboboxList>
            <ComboboxOption value="Apple" />
            <ComboboxOption value="Banana" />
            <ComboboxOption value="Orange" />
            <ComboboxOption value="Pineapple" />
            <ComboboxOption value="Kiwi" />
          </ComboboxList>
        </ComboboxPopover>
      </Combobox>

      <h4>A regular input</h4>
      <input placeholder="but this is" name="_welp"></input>
      <button type="submit">Submit</button>
    </form>
  );
}

Expected behavior

The input is cleared when calling form.reset.

Reproducible example

https://codesandbox.io/s/unruffled-bell-s7r3t8?file=/src/App.js

Suggested solution(s)

The input should probably listen to the onreset event and act accordingly.

Your environment

Software Name(s) Version
Reach Package 0.17.0
React 18.0.0
Browser Brave Browser 1.40.107 (Chromium 103.0.5060.53)
Assistive tech
Node 18.3.0
npm/yarn 8.11.0
Operating System macOS 12.4
@chaance chaance added the Status: Unreleased Issue addressed but not yet released label Jul 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Unreleased Issue addressed but not yet released
Projects
None yet
Development

No branches or pull requests

2 participants