PR Feedback: Adapt for undefined handling in MUI

CrossBreezeNL · Apr 18, 2024 · 3d9e163 · 3d9e163
1 parent 0227760
commit 3d9e163
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/packages/react-model-ui/src/views/common/AsyncAutoComplete.tsx b/packages/react-model-ui/src/views/common/AsyncAutoComplete.tsx
@@ -12,7 +12,12 @@ export interface AsyncAutoCompleteProps<T> extends Omit<AutocompleteProps<T, fal
 }
 
 // Based on https://mui.com/material-ui/react-autocomplete/
-export default function AsyncAutoComplete<T>({ label, optionLoader, ...props }: AsyncAutoCompleteProps<T>): React.ReactElement {
+export default function AsyncAutoComplete<T>({
+   label,
+   optionLoader,
+   textFieldProps,
+   ...props
+}: AsyncAutoCompleteProps<T>): React.ReactElement {
    const [open, setOpen] = React.useState(false);
    const [options, setOptions] = React.useState<readonly T[]>([]);
    const loading = open && options.length === 0;
@@ -54,7 +59,7 @@ export default function AsyncAutoComplete<T>({ label, optionLoader, ...props }:
          renderInput={params => (
             <TextField
                {...params}
-               {...props.textFieldProps}
+               {...textFieldProps}
                label={label}
                InputProps={{
                   ...params.InputProps,

diff --git a/packages/react-model-ui/src/views/common/RelationshipAttributesDataGrid.tsx b/packages/react-model-ui/src/views/common/RelationshipAttributesDataGrid.tsx
@@ -22,7 +22,6 @@ export function EditAttributePropertyComponent({
    const relationship = useRelationship();
    const queryApi = useModelQueryApi();
    const gridApi = useGridApiContext();
-   const ref = React.useRef();
 
    const referenceCtx: CrossReferenceContext = React.useMemo(
       () => ({
@@ -43,7 +42,6 @@ export function EditAttributePropertyComponent({
 
    return (
       <AsyncAutoComplete
-         ref={ref}
          autoFocus={hasFocus}
          fullWidth={true}
          label=''

diff --git a/packages/react-model-ui/src/views/form/EntityForm.tsx b/packages/react-model-ui/src/views/form/EntityForm.tsx
@@ -23,7 +23,7 @@ export function EntityForm(): React.ReactElement {
                label='Name'
                margin='normal'
                variant='outlined'
-               value={entity.name}
+               value={entity.name ?? ''}
                onChange={event => dispatch({ type: 'entity:change-name', name: event.target.value ?? '' })}
             />
 
@@ -34,7 +34,7 @@ export function EntityForm(): React.ReactElement {
                variant='outlined'
                multiline={true}
                rows={2}
-               value={entity.description}
+               value={entity.description ?? ''}
                onChange={event => dispatch({ type: 'entity:change-description', description: event.target.value ?? '' })}
             />
          </FormSection>

diff --git a/packages/react-model-ui/src/views/form/RelationshipForm.tsx b/packages/react-model-ui/src/views/form/RelationshipForm.tsx
@@ -28,21 +28,21 @@ export function RelationshipForm(): React.ReactElement {
          <FormSection label='General'>
             <TextField
                label='Name'
-               value={relationship.name}
+               value={relationship.name ?? ''}
                onChange={event => dispatch({ type: 'relationship:change-name', name: event.target.value ?? '' })}
             />
 
             <TextField
                label='Description'
                multiline={true}
                rows={2}
-               value={relationship.description}
+               value={relationship.description ?? ''}
                onChange={event => dispatch({ type: 'relationship:change-description', description: event.target.value ?? '' })}
             />
 
             <TextField
                label='Type *'
-               value={relationship.type}
+               value={relationship.type ?? ''}
                onChange={event => dispatch({ type: 'relationship:change-type', newType: event.target.value ?? '' })}
             />