Merge pull request #1 from mattharris191/text-inputs

Switch to input type="text" and @wojtekmaj/predict-input-value packag…

Author: mattharris191

package.json

@@ -41,6 +41,7 @@
   "license": "MIT",
   "dependencies": {
     "@wojtekmaj/date-utils": "^1.0.0",
+    "@wojtekmaj/predict-input-value": "^1.0.0",
     "get-user-locale": "^1.2.0",
     "make-event-props": "^1.1.0",
     "merge-class-names": "^1.1.1",

src/TimeInput.jsx

@@ -31,15 +31,15 @@ function hoursAreDifferent(date1, date2) {
   );
 }
 
-function isValidInput(element) {
-  return element.tagName === 'INPUT' && element.type === 'number';
+function isInternalInput(element) {
+  return element.tagName === 'INPUT' && element.getAttribute('data-input') === 'true';
 }
 
 function findInput(element, property) {
   let nextElement = element;
   do {
     nextElement = nextElement[property];
-  } while (nextElement && !isValidInput(nextElement));
+  } while (nextElement && !isInternalInput(nextElement));
   return nextElement;
 }
 

src/TimeInput/Input.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import mergeClassNames from 'merge-class-names';
 import updateInputWidth, { getFontShorthand } from 'update-input-width';
+import predictInputValue from '@wojtekmaj/predict-input-value';
 
 /* eslint-disable jsx-a11y/no-autofocus */
 
@@ -35,23 +36,14 @@ function updateInputWidthOnFontLoad(element) {
   document.fonts.addEventListener('loadingdone', onLoadingDone);
 }
 
-function getSelectionString() {
-  if (typeof window === 'undefined') {
-    return null;
-  }
-
-  return window.getSelection().toString();
-}
-
-function makeOnKeyPress(maxLength) {
+function makeOnKeyPress(max) {
   return function onKeyPress(event) {
-    const { key, target: input } = event;
-    const { value } = input;
+    const { key } = event;
 
     const isNumberKey = !isNaN(parseInt(key, 10));
-    const selection = getSelectionString();
+    const nextValue = predictInputValue(event);
 
-    if (isNumberKey && (selection || value.length < maxLength)) {
+    if (isNumberKey && (nextValue <= max)) {
       return;
     }
 
@@ -79,7 +71,6 @@ export default function Input({
   value,
 }) {
   const hasLeadingZero = showLeadingZeros && value !== null && value < 10;
-  const maxLength = max.toString().length;
 
   return [
     (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),
@@ -95,13 +86,14 @@ export default function Input({
       )}
       data-input="true"
       disabled={disabled}
+      inputMode="numeric"
       max={max}
       min={min}
       name={name}
       onChange={onChange}
       onFocus={onFocus}
       onKeyDown={onKeyDown}
-      onKeyPress={makeOnKeyPress(maxLength)}
+      onKeyPress={makeOnKeyPress(max)}
       onKeyUp={(event) => {
         updateInputWidth(event.target);
 
@@ -122,7 +114,7 @@ export default function Input({
       }}
       required={required}
       step={step}
-      type="number"
+      type="text"
       value={value !== null ? value : ''}
     />,
   ];

yarn.lock

@@ -1196,6 +1196,11 @@
   resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.0.2.tgz#31348c572606ac42aaf9b7bb22074fc0b163cc2b"
   integrity sha512-sOu+uH3jzsECLg3YGH++/pLWs8S4eKiXMwMIcotE62CO9AB/HRyhZ0ISwann/30DLnfCw4skvr8h9gF3aafhPA==
 
+"@wojtekmaj/predict-input-value@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@wojtekmaj/predict-input-value/-/predict-input-value-1.0.0.tgz#dab4b6fa18f7247843f2f1d7065e182efd715f6c"
+  integrity sha512-cAMCkp0Qv0BZdnSeTER66xW2LeCkf1H2NgVYoblb/F/TzewqbugTc/GeXsUQK79875GXIPSaAypo0sbKX0jwVQ==
+
 abab@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"