EditableText crashes with type='number' with [email protected]

[vadzim]

Environment

• Package version(s): 3.17.1
• React version: 16.8.6
• Browser and OS versions: Chrome 75.0.3770.142 (64-bit), Firefox 68.0.1 (64-bit), Linux

Minimal repro: https://codesandbox.io/s/blueprint-sandbox-jxsv8

Note

This bug is not reproduced with [email protected]

Steps to reproduce

1. Add

<EditableText type="number" defaultValue="12345" />

to the code

2. Run app, click on that input.

Actual behavior

app crashes here

blueprint/packages/core/src/components/editable-text/editableText.tsx

Line 146 in 8c40112

input.setSelectionRange(this.props.selectAllOnFocus ? 0 : length, length);

in Chrome:

• empty screen
• error in console:

Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.
    at input (https://nm8s7.csb.app/node_modules/@blueprintjs/core/lib/cjs/components/editable-text/editableText.js:41:27)
    at commitAttachRef (https://nm8s7.csb.app/node_modules/react-dom/cjs/react-dom.development.js:17495:7)

in Firefox:

• error on screen:

1 of 2 errors on the page
InvalidStateError
An attempt was made to use an object that is not, or is no longer, usable
▼ 16 stack frames were expanded.
input@https://jxsv8.csb.app/node_modules/
blueprintjs/core/lib/cjs/components/editable-text/editableText.js:41:27
commitAttachRef
https://jxsv8.csb.app/node_modules/react-dom/cjs/react-dom.development.js:17495:7

Expected behavior

Component enters editor mode without errors.

[adidahiya]

What does using an EditableText afford you in this case? Why are you using it instead of an <InputGroup type="number"> or <NumericInput>?

I think we could potentially support type="number" on EditableText, but it would need to be a holistically considered change that fixes this reported crash and also deals with all the multiline-related props which would be unsupported.

[vadzim]

I would suggest that component does not crash the app anyway, may be just ignoring type property.
Though with older react version EditableText works well also with type="number".

I'm using EditableText for numbers in the same way as for general text - basically I need inputs to look like text without any borders and turn editable on clicks. Now I'm using a workaround, I turn EditableText to a controlled component, then handle onChange event and clean the text with regular expression, However this way has some issues, e.g. text cursor jumps to the end of the text when entering not numeric characters.

[vadzim]

I'm gonna try to fix that according to https://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome