React: Problem when input type changes from email to text

[adrianimboden]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When an input field changes from "email" to "text", an exception TypeError will be thrown from setSelection.

Reproduction
See here: https://github.com/adrianimboden/react-bug-reproduction

What is the expected behavior?
It should not crash because of an uncaught exception

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
master (https://github.com/facebook/react/commit/4ca7855ca062d5d7dfca83c86acf46731e1e57ef)
Firefox

This would be my proposed change to fix the issue: https://github.com/adrianimboden/react/commit/db923b8c3c1cb23ad9fb150c160ce56f39dd3cae

[nhunzaker]

Dang. Just a gut triage, I think this is happening because React is trying to restore selection before the input actually changes types. For what ever reason, email and number inputs do not support the text selection API. There's an order of operations here that is out of sync.

Great catch!

[nhunzaker]

Circling back! Thanks for providing a possible fix!

1. I want to make sure that checking the type is sufficient. Should we instead compare the value of selectionStart? For example:

var input = document.createElement('input')
input.selectionStart // 0

input.type = 'email'
input.selectionStart // null
input.selectionEnd // null

1. From there, it would be awesome to make a DOM test fixture

Is that something you'd like to take on?

[leonascimento]

Ping @adrianimboden https://github.com/adrianimboden/react/commit/db923b8c3c1cb23ad9fb150c160ce56f39dd3cae#diff-a654f37b01573fc8006b426d56ad53ceR30

[adrianimboden]

Sorry, I was a little bit busy. I don't know when I can free some time to implement a proper fix with tests.
If someone wants to pick up on the matter, I would not be disappointed.

[spirosikmd]

I can pick this up! Would that be ok @adrianimboden?

[spirosikmd]

@leonascimento regarding the tests, any idea where could they be located? If there aren't any tests for ReactInputSelection then maybe creating react/packages/react-dom/src/client/__tests__/ReactInputSelection-test.js is an option to explicitly test hasSelectionCapabilities function?

Otherwise, if we want to test this on a more integration level, should we extend react/packages/react-dom/src/events/__tests__/SelectEventPlugin-test.js tests?

[Nasir13]

Hiii me nasir... Anyone needs help

nasir
On Jan 24, 2018 8:30 PM, "Nathan Hunzaker" [e-mail] wrote:

Circling back! Thanks for providing a possible fix!

1. I want to make sure that checking the type is sufficient. Should we
   instead compare the value of selectionStart? For example:

var input = document.createElement('input')input.selectionStart // 0
input.type = 'email'input.selectionStart // nullinput.selectionEnd // null

1. From there, it would be awesome to make a DOM test fixture
   https://github.com/facebook/react/tree/master/fixtures/dom

Is that something you'd like to take on?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/12062#issuecomment-360161381,
or mute the thread
https://github.com/notifications/unsubscribe-auth/Aa65fYbFhhfN1XtW_1gYnmFexzBXsPl6ks5tN0WBgaJpZM4RlgsG
.

[spirosikmd]

Hi @Nasir13! I am currently working on this issue. I mention it so we don't end up doing duplicate work!

[nhunzaker]

Awesome. @spirosikmd thanks for picking this up!

[diegoborda]

Somebody working on this? The PR is quiet. If you want i can take it! @aweary @spirosikmd

[spirosikmd]

Hi @diegoborda! I am still waiting for an answer from @aweary on #12135. It should be ready to merge.

[gaearon]

Fixed in React 16.4.1.