onClick event listener is not working don't know why

Question

I've been trying to log my event object value in 'option' tag and it does not work, but it does work in select tag, here is my code:

{data.map((item, index) => { const {name, options} = item; return ( <div className="item" key={name}> <label htmlFor={name}> Select any {name}: <select name={name} id={name} onClick={(e) => console.log(e.target.value)}> <option disabled selected>Any {name}</option> {options.map((item, index) => { return ( <option value={item} key={index} onClick={(e) => console.log(e.target.value)} >{item}</option> ) })} </select> </label> </div> ) })}

what's wrong with my option tag?

Are you expecting the event to fire each time you change the value? Or when you click the select-input and the pop-up opens? — Phoenix1355
– Phoenix1355, Commented Mar 5, 2021 at 9:01
Same question as @Phoenix1355 asked. Do you want the console to log on change or on user click? — Near
– Near, Commented Mar 5, 2021 at 9:05
yes I want the event to fire each time I click on each option — Saimur Rahman
– Saimur Rahman, Commented Mar 5, 2021 at 9:07
Maybe you want to take a look at stackoverflow.com/questions/3487263/… or this (it says that option does not trigger onClick in chrome) stackoverflow.com/questions/22482842/… — Stefan
– Stefan, Commented Mar 5, 2021 at 9:34

Sreekar Reddy · Accepted Answer · 2021-03-05 09:47:29Z

I don't think there is anything wrong with your option tag. Did you encounter this issue in Chrome?

This seems to be a known issue in Chrome: The onclick event does not work for options

Indeed, I tried onClick with both Chrome and Firefox - for the option tag, onClick does fire in Firefox but not in Chrome.

Collectives™ on Stack Overflow

onClick event listener is not working don't know why

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related