Fix updateInputWidth not called properly, improve Preact compatibility

Author: wojtekmaj

package.json

@@ -31,7 +31,6 @@
     "get-user-locale": "^1.2.0",
     "make-event-props": "^1.1.0",
     "merge-class-names": "^1.1.1",
-    "merge-refs": "^1.0.0",
     "prop-types": "^15.6.0",
     "react-clock": "^3.1.0",
     "react-fit": "^1.4.0",

src/TimeInput/Input.jsx

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import mergeClassNames from 'merge-class-names';
-import mergeRefs from 'merge-refs';
 import updateInputWidth, { getFontShorthand } from 'update-input-width';
 
 import { isRef } from '../shared/propTypes';
@@ -105,6 +104,15 @@ export default function Input({
   step,
   value,
 }) {
+  useLayoutEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+
+    updateInputWidth(inputRef.current);
+    updateInputWidthOnFontLoad(inputRef.current);
+  }, [inputRef, value]);
+
   const hasLeadingZero =
     showLeadingZeros && value && value < 10 && (value === '0' || !value.toString().startsWith('0'));
   const maxLength = max ? max.toString().length : null;
@@ -143,7 +151,7 @@ export default function Input({
         }
       }}
       placeholder={placeholder}
-      ref={mergeRefs(updateInputWidth, updateInputWidthOnFontLoad, inputRef)}
+      ref={inputRef}
       required={required}
       step={step}
       type="number"

test/yarn.lock

@@ -4527,13 +4527,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge-refs@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "merge-refs@npm:1.0.0"
-  checksum: 3b4ea1a178c52349a0e725281aa34b130fb6819d22f8e616ae30da6f4da223d9c3a53f6e1a427c5ba56bf6b162c98de95a53f76e01a343e10162823fee33f64a
-  languageName: node
-  linkType: hard
-
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -5475,7 +5468,6 @@ __metadata:
     get-user-locale: ^1.2.0
     make-event-props: ^1.1.0
     merge-class-names: ^1.1.1
-    merge-refs: ^1.0.0
     prop-types: ^15.6.0
     react-clock: ^3.1.0
     react-fit: ^1.4.0

yarn.lock

@@ -5168,13 +5168,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge-refs@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "merge-refs@npm:1.0.0"
-  checksum: 3b4ea1a178c52349a0e725281aa34b130fb6819d22f8e616ae30da6f4da223d9c3a53f6e1a427c5ba56bf6b162c98de95a53f76e01a343e10162823fee33f64a
-  languageName: node
-  linkType: hard
-
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -5995,7 +5988,6 @@ __metadata:
     less: ^4.0.0
     make-event-props: ^1.1.0
     merge-class-names: ^1.1.1
-    merge-refs: ^1.0.0
     prettier: ^2.5.0
     pretty-quick: ^3.1.0
     prop-types: ^15.6.0