Disable IE's native input "clear" control, since it doesn't work properly.

[ZhouyangYe]

Type in something to the field and clear it by clicking the 'x' sign on IE, then focus out by clicking somewhere else, the value retained.

[Tauka]

@ZhouyangYe As I know, the input is controlled by the state of the component, so there is no way to programmatically clear the input, other than using ref.getInstance().clear()

[ZhouyangYe]

@Tauka Oh, that's why, and the 'x' on IE does not notify when it is clicked, so there is no way to check if it's clicked. I've tried, onchange event can capture the value change when focus out, is it possible that when user focus out, the component get the value from Input element and update the state?

[ericgio]

@ZhouyangYe: Can you please provide a repro case/code example? It sounds like you might be passing in a value that is setting the selection.

I can't repro your case in the example.

[ZhouyangYe]

@ericgio Hi, do you mean to reproduce the issue? I created a Typescript element with empty options and empty onchange function. Type in some value and clear it using the 'X' on IE. Then focus out by clicking somewhere else. The value is retained when focus out.

[ericgio]

@ZhouyangYe: a code example or jsfiddle would be helpful.

[ZhouyangYe]

@ericgio Can use the first example to test: http://ericgio.github.io/react-bootstrap-typeahead/

[ZhouyangYe]

@ericgio It only happens on IE, with IE's default clear 'X'.

[ericgio]

Ah I see what you're saying now. That's expected behavior; all that's happening is the input value is being cleared, but the actual selections are not. See #34 for more context on why the component works this way. Use the clearButton prop to add an 'x' button to the component; that will call the clear() method internally.

I should disable the native IE control...

[ZhouyangYe]

@ericgio o, I see, thanks!

[ericgio]

Fixed in v1.2.0