Fix for useId not available in React 16

Author: KoolADE85

components/dash-core-components/package-lock.json

@@ -76,6 +76,7 @@
     "@types/ramda": "^0.31.0",
     "@types/react": "^16.14.8",
     "@types/react-dom": "^16.9.13",
+    "@types/uniqid": "^5.3.4",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
     "babel-loader": "^9.2.1",

components/dash-core-components/package.json

@@ -1,13 +1,14 @@
 import {pick} from 'ramda';
 import React, {
+    InputHTMLAttributes,
     KeyboardEvent,
     KeyboardEventHandler,
     useCallback,
     useEffect,
     useRef,
     useState,
-    useId,
 } from 'react';
+import uniqid from 'uniqid';
 import fastIsNumeric from 'fast-isnumeric';
 import LoadingElement from '../utils/_LoadingElement';
 import './css/input.css';
@@ -330,7 +331,7 @@ function Input({
     const input = useRef(document.createElement('input'));
     const [value, setValue] = useState<InputProps['value']>(props.value);
     const [pendingEvent, setPendingEvent] = useState<number>();
-    const inputId = useId();
+    const inputId = useState(() => uniqid('input-'))[0];
 
     const valprops =
         props.type === HTMLInputTypes.number ? {} : {value: value ?? ''};
@@ -401,7 +402,11 @@ function Input({
             value = convert(value);
 
             if (!isEquivalent(base, value)) {
-                input.current.value = `${value}` ?? '';
+                if (typeof value === 'undefined') {
+                    input.current.value = '';
+                } else {
+                    input.current.value = `${value}`;
+                }
             }
         },
         []
@@ -490,7 +495,10 @@ function Input({
         }
     }, [value, props.debounce, props.type]);
 
-    const pickedInputs = pick(inputProps, props);
+    const pickedInputs = pick(
+        inputProps,
+        props
+    ) as InputHTMLAttributes<HTMLInputElement>;
 
     const isNumberInput = props.type === HTMLInputTypes.number;
     const currentNumericValue = convert(input.current.value || '0');