Fluentui: Cannot edit text input in Office-ui-fabric-react datepicker

[naveenprasaths]

Hi,

I have created a date picker with Office-ui-fabric-react. I have enabled the "allowTextInput" property. I can able to edit the text input in Chrome, but its not working in IE 11.

Observed behavior:
Chrome: Working fine in both Keyboard Navigation and in Mouse click.
IE 11: Working fine in Keyboard Navigation, but cannot able to edit on mouse click.

Can someone help me on this?

[kkjeer]

Possibly related to #5953

[micahgodbolt]

Yeah, I can confirm this isn't working

https://s.codepen.io/micahgodbolt/debug/jvEaLz/YvkgOnewjnqk

I'll mention this to @lorejoh12.

what you can't see is my furiously typing away after the calendar is closed :)

[keepWalking]

Could we have any ETA here?

[naveenprasaths]

Any updates on this?

[micahgodbolt]

This may be down in the TextField component that's used by DatePicker, so i'll have our shield devs look at it.

[micahgodbolt]

After a little triage, it seems it may be related to the role="button" that we place on the input

[micahgodbolt]

Yeah, it appears to be role="button". Do we want to remove this role when the input already has focus? @cschlechty - would removing role="button" from this input during focus cause issues? Is there some other way that IE11 will let us have a button with editable values?

[cschlechty]

Role="button" should have no usability impact, do you mean type="button"? I could see how that'd mess with things. You likely want a text input which launches a menu. I'll take a look later this afternoon if needed.

[micahgodbolt]

The prop I noticed was role="button", and it appears that removing it allows IE11 to edit the value in the input (which is what the OP is asking for). If I can simply remove it entirely, that's an easy fix.

[cschlechty]

You may need to removed aria-expanded then and look at other ways to indicate the menu has opened. It looks like input isn't a supported element which is likely why the button role was added https://www.w3.org/TR/wai-aria-1.1/#aria-expanded It should maybe be a combo box with an owned dialog of the date menu..? That way tou can keep expanded etc.

[kenotron]

Found an article listing this as a solution. I think that's what @cschlechty is referring to:

<div aria-label=”Tag” role=”combobox” aria-expanded=”true” aria-owns=”owned_listbox” aria-haspopup=”listbox”>
  <input type=”text” aria-autocomplete=”list” aria-controls=”owned_listbox” aria-activedescendant=”selected_option”>
</div>
<ul role=”listbox” id=”owned_listbox”>
  <li role=”option”>Zebra</li>
  <li role=”option” id=”selected_option”>Zoom</li>
</ul>

[kenotron]

There's more info here: https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html