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.

Sign up for GitHub

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

Jump to bottom

onConfirm function is triggered before the auto selected option is set as the value of the input #157

Open
davehaigh opened this issue Jun 2, 2017 · 1 comment · May be fixed by #169
Open

onConfirm function is triggered before the auto selected option is set as the value of the input #157

davehaigh opened this issue Jun 2, 2017 · 1 comment · May be fixed by #169
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) help wanted

Comments

@davehaigh
Copy link

  1. use a combination of autoselect: true and an onconfirm function which triggers the submit of the form.
  2. type some content into the input e.g. if you typed "Dav"
  3. hit return to autoselect the highlighted option e.g. it may have been "Dave Haigh"
  4. if you're using the entered value of the input to populate the value of the input on next load then the page reloads with only the typed value (Dav) in the input rather than the full text of the item that was autoselected (Dave Haigh)

I believe the onconfirm function is triggering before the autoselected value is set as the value of the input.

Note: To get around this I am using a set timeout in the onconfirm function to delay its triggering, allowing time for the value to be set in the input before it fires the form submit.
@tvararu tvararu added the 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) label Jun 2, 2017
@tvararu
Copy link
Contributor

tvararu commented Jun 2, 2017

The onConfirm function is indeed triggered right before the state.query is set:

accessible-autocomplete/src/autocomplete.js

Line 260 in 7e7a6cd

this.props.onConfirm(selectedOption)

There is no particular reason for this.

One solution is to move it into the callback for setState:

-   this.props.onConfirm(selectedOption)
    this.setState({
      focused: -1,
      menuOpen: false,
      query: newQuery,
      selected: -1
-   })
+   }, () => this.props.onConfirm(selectedOption))

(It also gets triggered in handleComponentBlur)

@samtsai samtsai linked a pull request Jun 14, 2017 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) help wanted
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Issue 157: trigger onConfirm after set state samtsai/accessible-autocomplete
2 participants
@tvararu @davehaigh