Allow setting initial value for autocomplete field

Author: NicolasLooschen

lib/components/Inputs/Autocomplete/Autocomplete.js

@@ -23,7 +23,8 @@ import { getHighlightBackgroundColor, shouldHighlightBackground, shouldShowRequi
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
 export var Autocomplete = function (_a) {
-    var _b = _a.customProperties, options = _b.options, registerReturn = _b.registerReturn, fieldId = _a.fieldId, _c = _a.uiSettings, disabled = _c.disabled, description = _c.description, label = _c.label, placeholder = _c.placeholder, size = _c.size, variant = _c.variant, validation = _a.validation;
+    var _b;
+    var _c = _a.customProperties, _d = _c.options, options = _d === void 0 ? [] : _d, registerReturn = _c.registerReturn, fieldId = _a.fieldId, _e = _a.uiSettings, disabled = _e.disabled, description = _e.description, label = _e.label, placeholder = _e.placeholder, size = _e.size, variant = _e.variant, validation = _a.validation;
     var register = useFormContext().register;
     if (register === undefined && registerReturn === undefined) {
         throw new Error('Either register or registerReturn must be supplied');
@@ -45,15 +46,17 @@ export var Autocomplete = function (_a) {
     var isRequired = required !== false;
     var showRequiredLabel = shouldShowRequiredLabel(isRequired, disabled);
     var highlightBackground = shouldHighlightBackground(value, isRequired, disabled);
-    return _jsx(MUIAutocomplete, { fullWidth: true, size: size, disabled: disabled, id: 'combo-box-demo', options: options, onChange: handleChange, renderInput: function (params) { return _createElement(TextField, __assign({}, params, { error: isErroneous, helperText: isErroneous ? error.message : description, label: label, placeholder: placeholder, InputLabelProps: { required: showRequiredLabel, shrink: true }, onBlur: onBlur, inputRef: ref, variant: variant, key: fieldId, name: fieldId })); }, renderOption: function (props, option, _a) {
+    return _jsx(MUIAutocomplete, { disabled: disabled, fullWidth: true, id: 'combo-box-demo', options: options, onBlur: onBlur, onChange: handleChange, renderInput: function (params) {
+            return _createElement(TextField, __assign({}, params, { error: isErroneous, helperText: isErroneous ? error.message : description, InputLabelProps: { required: showRequiredLabel, shrink: true }, key: fieldId, label: label, name: fieldId, placeholder: placeholder, variant: variant }));
+        }, renderOption: function (props, option, _a) {
             var inputValue = _a.inputValue;
             var matches = match(option.label, inputValue);
             var parts = parse(option.label, matches);
             return (_jsx("li", __assign({}, props, { children: _jsx("div", { children: parts.map(function (part, index) { return (_jsx("span", __assign({ style: {
                             fontWeight: part.highlight ? 700 : 400,
                         } }, { children: part.text }), index)); }) }) })));
-        }, sx: function (theme) { return ({
+        }, size: size, sx: function (theme) { return ({
             backgroundColor: getHighlightBackgroundColor(theme, highlightBackground),
-        }); } });
+        }); }, value: (_b = options.find(function (option) { return option.value === value; })) !== null && _b !== void 0 ? _b : null });
 };
 export default Autocomplete;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pikobytes/pikobytes-react-forms",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",

src/components/Form/Form.stories.tsx

@@ -18,9 +18,9 @@ export default {
 };
 
 export function FormProviderWrapper({
-  children,
-  defaultValues,
-}: {
+                                      children,
+                                      defaultValues,
+                                    }: {
   children: JSX.Element;
   defaultValues?: { [key: string]: string };
 }) {
@@ -33,7 +33,7 @@ function Template(args: any) {
   return (
     <>
       <Form {...args} />
-      <button form="test" type="submit">
+      <button form='test' type='submit'>
         Submit
       </button>
     </>
@@ -54,6 +54,27 @@ Default.args = {
   uiConfiguration: exampleUiConfiguration,
 };
 
+// with initial values
+export const InitialValues = Template.bind({});
+// @ts-ignore
+InitialValues.args = {
+  formId: 'test_initial_values',
+  onError: (e) => {
+    console.log(e);
+  },
+  onSubmit: (data) => {
+    console.log(data);
+  },
+  initialValues: {
+    sensor: '1',
+    title: 'Initial Title',
+    country: 'DE',
+    dataType: '1',
+  },
+  configuration: exampleConfiguration,
+  uiConfiguration: exampleUiConfiguration,
+};
+
 export const MultipleFields = Template.bind({});
 // @ts-ignore
 MultipleFields.args = {

src/components/Inputs/Autocomplete/Autocomplete.tsx

@@ -14,7 +14,7 @@ import match from 'autosuggest-highlight/match';
 
 
 export const Autocomplete = ({
-                               customProperties: { options, registerReturn },
+                               customProperties: { options = [], registerReturn },
                                fieldId,
                                uiSettings: { disabled, description, label, placeholder, size, variant },
                                validation,
@@ -55,25 +55,25 @@ export const Autocomplete = ({
 
 
   return <MUIAutocomplete
-    fullWidth
-    size={size}
     disabled={disabled}
+    fullWidth
     id='combo-box-demo'
     options={options}
+    onBlur={onBlur}
     onChange={handleChange}
-    renderInput={(params) => <TextField
-      {...params}
-      error={isErroneous}
-      helperText={isErroneous ? error!.message : description}
-      label={label}
-      placeholder={placeholder}
-      InputLabelProps={{ required: showRequiredLabel, shrink: true }}
-      onBlur={onBlur}
-      inputRef={ref}
-      variant={variant}
-      key={fieldId}
-      name={fieldId}
-    />}
+    renderInput={(params) => {
+      return <TextField
+        {...params}
+        error={isErroneous}
+        helperText={isErroneous ? error!.message : description}
+        InputLabelProps={{ required: showRequiredLabel, shrink: true }}
+        key={fieldId}
+        label={label}
+        name={fieldId}
+        placeholder={placeholder}
+        variant={variant}
+      />;
+    }}
     renderOption={(props, option, { inputValue }) => {
       const matches = match(option.label, inputValue);
       const parts = parse(option.label, matches);
@@ -95,12 +95,14 @@ export const Autocomplete = ({
         </li>
       );
     }}
+    size={size}
     sx={(theme) => ({
       backgroundColor: getHighlightBackgroundColor(
         theme,
         highlightBackground,
       ),
     })}
+    value={options.find(option => option.value === value) ?? null}
   />;
 };