Can't select item from the menu in IE11

[milencheto]

Hi, guys... I have a problem on IE11. When I open the menu, it shows my list, but I can't click on it to choosing some option. It looks like IE11 recognize the items just like a text but not links.. Can you help me?

[CMTegner]

Hi Milena! Can you provide a reduced test case so we can help debug this problem? Perhaps it's reproducible in one of the examples?

[milencheto]

https://github.com/facebook/react/issues/6614 It looks like other people have the same and more problems with this component.

[CMTegner]

I'm not sure how that React core issue relates to your original description. Is the autofill some how preventing you from selecting items from the menu?

[gregdillon]

I just noticed this issue the latest version of Safari as well.

UPDATE: So it looks like Safari is requiring a double-click on the item to select, versus a single-click in chrome. May not be related to the original issue.

[CMTegner]

@gregdillon seems like the examples work fine (i.e. only require a single click to select) in Safari. Can you provide a reduced test case that demonstrates the problem?

[gregdillon]

@CMTegner I'll keep looking. Not sure what is going on and it may be my implementation. I'll report back if/when I figure out. Thanks.

[rek]

Any news? I also have this issue with IE11 and EDGE.

[CMTegner]

@rek can you create a reduced test case which reproduces the error?

[rek]

Working on it :)

[rek]

Is there a JSFiddle or anything I can start from to try and reproduce this there?

[CMTegner]

@rek try this JSBin: http://jsbin.com/mipesawapi/edit?js,output

[rek]

We found a fix for this. Our problem was in our implementation. It was because we had a dynamic Id in the inputProps.id directly, once we changed this it started working.

Here is what we changed it to:

import AutocompleteBase from 'autocomplete'

export class AutoComplete extends React.Component {
	autoCompleteId = _.uniqueId(this.props.id || 'autocomplete-')
	...
	render() {
		...

		return (
			<AutocompleteBase
				inputProps={{
					name: this.props.title,
					id: this.autoCompleteId,
				}}
				...
			/>
		)
	}
}

[dennisat]

@rek this didn't work for me. Also without id didn't work either.

[dennisat]

I found the bug in my code. The key in the shouldItemRender should be unique id per item and not new value.

In shouldItemRender as key of the JSX Element, I was assigned a different value always.

So I had something like this: shouldItemRender={(item, value)=><div key={this.cheapGuid++}>{value}</div>}

Yeah, I know, it is anti-pattern since it renders all the items always but I had no unique id there.

For some reason, in MS Browsers (IE11 & Edge) the items are not clickable till you assign a unique key for each item as key in shouldItemRender.

Ensure that the key is unique, otherwise, the items might flicker.