question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to prevent Autocomplete change value onSelect

See original GitHub issue

Version

2.8.3

Environment

Chrome 57

Reproduction link

http://codepen.io/lgordey/pen/wJOQmM?editors=1111

Steps to reproduce

Make changes in input, select value from autocomplete. Repeat a few times.

What is expected?

I expect that this.setState({ text: '' }); will clear input, but component rewrite it after changing state. So I can do it just like

setTimeout(() => { this.setState({ text: '' }) }, 100);

What is actually happening?

Input is not clearing by setting empty string state to text.


Maybe there is some extra method to detect selection and prevent changing input value?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:12 (9 by maintainers)

github_iconTop GitHub Comments

4reactions
yesmeckcommented, May 16, 2017

Use onSearch instead of onChange.

1reaction
RaoHaicommented, Apr 5, 2017

How about select action do not trigger onChange defaultly? Or add an extra callback called onInputChange?

Read more comments on GitHub >

github_iconTop Results From Across the Web

ReactJS Material UI how to prevent Autocomplete to change ...
useState(options[0]); const [inputValue, setInputValue] = React.useState(""); const change = (event, newValue) => { event.preventDefault ...
Read more >
Suppress 'change' event within 'select' event? - Telerik
This means that the selection will be prevented and change event will not be raised. This is the only way to prevent change...
Read more >
How to Disable the Browser Autocomplete and Autofill on ...
To disable the autocomplete of text in forms, use the autocomplete attribute of <input> and <form> elements. You'll need the "off" value of...
Read more >
A Guide on Material UI AutoComplete in React - Refine Dev
To do this, you must ensure that the values are sorted systematically in the same dimension as they are grouped to avoid duplicate...
Read more >
How to prevent the onSelect event from triggering twice in the ...
So you initialize the autocomplete with this option to prevent the issue: var countries = [ { value: 'Andorra', data: 'AD' }, {...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found