fix: strange typing error only happening in build pipeline (#43)

* fix: strange typing error only happening in build pipeline

* bump version

* get inputId from props

Author: aurorascharff

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-react",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "React-komponenter for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./dist/index.js",

packages/react/src/formElements/MdAutocomplete.tsx

@@ -16,7 +16,7 @@ export interface MdAutocompleteProps {
   label?: string | null;
   options: MdAutocompleteOptionProps[];
   defaultOptions?: MdAutocompleteOptionProps[];
-  id?: string | number | null | undefined;
+  id?: string;
   onChange(e: MdAutocompleteOptionProps): void;
   name?: string;
   value?: string | number;
@@ -35,7 +35,7 @@ const MdAutocomplete: React.FunctionComponent<MdAutocompleteProps> = ({
   value,
   options,
   defaultOptions,
-  id = null,
+  id,
   name,
   placeholder = 'Søk',
   disabled = false,
@@ -53,7 +53,6 @@ const MdAutocomplete: React.FunctionComponent<MdAutocompleteProps> = ({
   const [autocompleteValue, setAutocompleteValue] = useState('');
   const [results, setResults] = useState<MdAutocompleteOptionProps[]>([]);
 
-  const uuid = id || uuidv4();
   const inputId = id && id !== '' ? id : uuidv4();
 
   const classNames = classnames('md-autocomplete', {
@@ -103,7 +102,7 @@ const MdAutocomplete: React.FunctionComponent<MdAutocompleteProps> = ({
   return (
     <div className={classNames}>
       <div className="md-autocomplete__label">
-        <div>{label}</div>
+        {label && label !== '' && <label htmlFor={inputId}>{label}</label>}
         {helpText && helpText !== '' && (
           <div className="md-autocomplete__help-button">
             <MdHelpButton
@@ -179,8 +178,8 @@ const MdAutocomplete: React.FunctionComponent<MdAutocompleteProps> = ({
               : []
             ).map((option) => (
               <button
-                key={`md-autocomplete-option-${uuid}-${option.value}`}
-                id={`md-autocomplete-option-${uuid}-${option.value}`}
+                key={`md-autocomplete-option-${inputId}-${option.value}`}
+                id={`md-autocomplete-option-${inputId}-${option.value}`}
                 type="button"
                 tabIndex={open ? 0 : -1}
                 className={optionClass(option)}