Skip to content

Commit b65e90e

Browse files
committed
Use type="text" when props.type=number to avoid browser bugs
fixes #62 (reproducible in chrome and safari also) • removes need for special keydown handling for ↑/↓/E keys • removes need for styling to remove default input type="number" browser styles • leaves filtering of non-numeric values to existing logic in handleChange (works for pasted text and keyboard entry)
1 parent 631bae4 commit b65e90e

File tree

4 files changed

+3
-39
lines changed

4 files changed

+3
-39
lines changed

.storybook/preview-head.html

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
<style>
2-
.react-code-input input[type="number"]::-webkit-outer-spin-button,
3-
.react-code-input input[type="number"]::-webkit-inner-spin-button {
4-
-webkit-appearance: none;
5-
margin: 0; }
6-
.react-code-input input[type="number"] {
7-
-moz-appearance: textfield; }
8-
</style>
91
<!-- Hotjar Tracking Code for https://40818419.github.io/react-code-input/ -->
102
<script>
113
(function(h,o,t,j,a,r){
@@ -16,4 +8,4 @@
168
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
179
a.appendChild(r);
1810
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
19-
</script>
11+
</script>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"types": "./src/ReactCodeInput.d.ts",
77
"scripts": {
88
"start": "npm run storybook",
9-
"build": "rm -r docs && mkdir docs && build-storybook -o docs && webpack && cd styles && sass style.scss style.css",
9+
"build": "rm -r docs && mkdir docs && build-storybook -o docs && webpack",
1010
"test": "cross-env NODE_ENV=test jest --silent",
1111
"test:coverage": "cross-env NODE_ENV=test jest --silent --coverage",
1212
"codecov": "codecov -f ./coverage/*.json",

src/ReactCodeInput.js

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ import { uuidv4 } from './utils';
1111

1212
const BACKSPACE_KEY = 8;
1313
const LEFT_ARROW_KEY = 37;
14-
const UP_ARROW_KEY = 38;
1514
const RIGHT_ARROW_KEY = 39;
16-
const DOWN_ARROW_KEY = 40;
17-
const E_KEY = 69;
1815

1916
class ReactCodeInput extends Component {
2017
constructor(props) {
@@ -201,21 +198,6 @@ class ReactCodeInput extends Component {
201198
}
202199
break;
203200

204-
case UP_ARROW_KEY:
205-
e.preventDefault();
206-
break;
207-
208-
case DOWN_ARROW_KEY:
209-
e.preventDefault();
210-
break;
211-
212-
case E_KEY: // This case needs to be handled because of https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in
213-
if (e.target.type === 'number') {
214-
e.preventDefault();
215-
break;
216-
}
217-
break;
218-
219201
default:
220202
break;
221203
}
@@ -282,7 +264,7 @@ class ReactCodeInput extends Component {
282264
autoFocus={autoFocus && (i === 0) ? 'autoFocus' : ''}
283265
value={value}
284266
key={`input_${i}`}
285-
type={type}
267+
type={type === 'number' ? 'text' : type}
286268
min={0}
287269
max={9}
288270
maxLength={input.length === i + 1 ? 1 : input.length}

styles/style.scss

Lines changed: 0 additions & 10 deletions
This file was deleted.

0 commit comments

Comments
 (0)