Skip to content

Controlled TextField allows modification apart from value prop #1350

Description

@jdhuntington

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Yes

This is an important use-case for me, but I'm happy to build my own control and copy the styling as a workaround.

Describe the issue:

A controlled TextField can be modified by a user to contain contents not matching the value.

Actual behavior:

In this code, user interaction with the TextField causes the text on screen to be modified and become out of sync with the data in the value prop.

<Fabric.TextField label='Fabric - Controlled by value' value='static value' />

Expected behavior:

In this code, I expect user interaction with the TextField to have no effect.

<Fabric.TextField label='Fabric - Controlled by value' value='static value' />

For contrast, this JSX which renders a vanilla DOM input node does not allow user modification.

<input id='vanilla-textfield' value='static value' type='text' />

If applicable, please provide a codepen repro:

https://codepen.io/anon/pen/XMBevW


Would a PR changing this behavior be welcome?

Additionally, the delay between user modification and the invocation of the onChanged callback poses several issues - would a change to that default behavior be welcome as well?

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions