Does React.js support HTML5 datalist?

Question

I'm trying to implement HTML5 datalist element in a easiest possible way.

Something like this:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

This does not work however. What would be my next step without having to install (npm) additional stuff.

Basically, I'm using the plain input react element and want to embed the datalist.

Here is my react code:

    <input className={"custom_input inline "+this.isValidInteger(this.props.price.price_first,0,2000000)} 
    style={{marginRight:'5px'}} 
    value={this.props.price.price_first || ''} type="text"
    onChange={(e)=>this.props.dispatch({type:"price", payload:e.target.value})} 
    placeholder=" Unesite..." 
    maxLength="10"/>

So I would like a dropdown on top of that.

Longdistance

Try this - #27286356 – Triceps

Supported Dom elements by reactjs - facebook.github.io/react/docs/dom-elements.html – Triceps

Answer 1

I'm currently using the html5 datalist in react without issues.

Here goes the implementation:

<input type="text" list="data" onChange={this._onChange} />

  <datalist id="data">
    {this.state.data.map((item, key) =>
      <option key={key} value={item.displayValue} />
    )}
  </datalist>

Retrochoir

How do I get the event when an option is selected from the dropdown either through keyboard or through click? – Phytogenesis

The datalist itself has no specific events to handle this. But what you can use is the oninput-event of the input element. Refer to this answer #30023228 – Retrochoir

Answer 2

Datalists work fine in React, but you must close each option tag (with a backslash at the end).

<option value="something" />

Downs

Answer 3

It takes a little change to make MDN datalist example works in React.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

<label>
    Choose a browser from this list:
    <input list="browsers" name="myBrowser" />  
</label>   
<datalist id="browsers">
    <option value="Chrome" />
    <option value="Firefox" />
    <option value="Internet Explorer" />
    <option value="Opera" />
    <option value="Safari" />
    <option value="Microsoft Edge" />   
</datalist>

Conglobate

Answer 4

This works fine with me using useRef hook; using the useState kinda have slow issue.

<input type="text" ref={item_name_ref} onClick={(e)=>{item_name_ref.current.value=""}}  defaultValue = {props.selectedRecord.item_name} list="item_name_list"/>
<datalist id="item_name_list">
    {  
        productsName.map((item,index)=>{
          return  <option key={uuid()} value={item.item_name} />;
        })
    }
</datalist>

then I can grab the result in

const handleClick=()=>{ alert(item_name.current.value)}

Stutman

Answer 5

Properly closing the option tag won't throw any error.

<input list="browsers">

// Not working code
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
</datalist>

//Working Code
<datalist id="browsers">
  <option value="Internet Explorer" />
  <option value="Firefox" />
</datalist>

Dermatoplasty