Fix 4942 so that placeholder in chakra-ui NativeSelectWidget is render properly (#4946)

Author: heath-freenome

CHANGELOG.md

@@ -20,43 +20,44 @@ should change the heading of the (upcoming) version to include a major version b
 
 ## @rjsf/antd
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 
 ## @rjsf/chakra-ui
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
+- Updated `NativeSelectWidget` so that is properly renders a placeholder, fixing [#4942](https://github.com/rjsf-team/react-jsonschema-form/issues/4942)
 
 ## @rjsf/core
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 
 ## @rjsf/daisyui
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 
 ## @rjsf/fluentui-rc
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 
 ## @rjsf/mantine
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 
 ## @rjsf/mui
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 
 ## @rjsf/react-bootstrap
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 
 ## @rjsf/semantic-ui
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 
 ## @rjsf/shadcn
 
-- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing ([#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927))
+- Fixed duplicate React keys in datalist when schema examples and default have different types, fixing [#4927](https://github.com/rjsf-team/react-jsonschema-form/issues/4927)
 # 6.2.5
 
 ## @rjsf/mui

…electNativeWidget/NativeSelectWidget.tsx …ativeSelectWidget/NativeSelectWidget.tsxpackages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx renamed to packages/chakra-ui/src/NativeSelectWidget/NativeSelectWidget.tsx packages/chakra-ui/src/SelectNativeWidget/NativeSelectWidget.tsx renamed to packages/chakra-ui/src/NativeSelectWidget/NativeSelectWidget.tsx

@@ -11,7 +11,7 @@ import {
   WidgetProps,
 } from '@rjsf/utils';
 import { OptionsOrGroups } from 'chakra-react-select';
-import { createListCollection, NativeSelect as ChakraSelect } from '@chakra-ui/react';
+import { createListCollection, NativeSelect } from '@chakra-ui/react';
 
 import { Field } from '../components/ui/field';
 import { getChakra } from '../utils';
@@ -79,12 +79,9 @@ export default function NativeSelectWidget<
           disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
         };
       });
-      if (showPlaceholderOption) {
-        (displayEnumOptions as any[]).unshift({ value: '', label: placeholder || '' });
-      }
     }
     return { valueLabelMap: valueLabelMap, displayEnumOptions: displayEnumOptions };
-  }, [enumDisabled, enumOptions, placeholder, showPlaceholderOption]);
+  }, [enumDisabled, enumOptions]);
 
   const selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions, false);
 
@@ -116,8 +113,8 @@ export default function NativeSelectWidget<
       label={labelValue(label, hideLabel || !label)}
       {...chakraProps}
     >
-      <ChakraSelect.Root>
-        <ChakraSelect.Field
+      <NativeSelect.Root>
+        <NativeSelect.Field
           id={id}
           onBlur={_onBlur}
           onChange={_onChange}
@@ -126,14 +123,19 @@ export default function NativeSelectWidget<
           value={formValue}
           aria-describedby={ariaDescribedByIds(id)}
         >
+          {showPlaceholderOption ? (
+            <option value='' disabled hidden>
+              {placeholder || ''}
+            </option>
+          ) : undefined}
           {selectOptions.items.map((item) => (
             <option key={item.value} value={item.value}>
               {item.label}
             </option>
           ))}
-        </ChakraSelect.Field>
-        <ChakraSelect.Indicator />
-      </ChakraSelect.Root>
+        </NativeSelect.Field>
+        <NativeSelect.Indicator />
+      </NativeSelect.Root>
     </Field>
   );
 }

…hakra-ui/src/SelectNativeWidget/index.ts …hakra-ui/src/NativeSelectWidget/index.tspackages/chakra-ui/src/SelectNativeWidget/index.ts renamed to packages/chakra-ui/src/NativeSelectWidget/index.ts packages/chakra-ui/src/SelectNativeWidget/index.ts renamed to packages/chakra-ui/src/NativeSelectWidget/index.ts

@@ -5,7 +5,7 @@ import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
 import RadioWidget from '../RadioWidget/RadioWidget';
 import RangeWidget from '../RangeWidget/RangeWidget';
 import SelectWidget from '../SelectWidget/SelectWidget';
-import NativeSelectWidget from '../SelectNativeWidget/NativeSelectWidget';
+import NativeSelectWidget from '../NativeSelectWidget/NativeSelectWidget';
 import TextareaWidget from '../TextareaWidget/TextareaWidget';
 import UpDownWidget from '../UpDownWidget/UpDownWidget';
 import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';

packages/chakra-ui/src/Widgets/Widgets.ts

@@ -0,0 +1,72 @@
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
+import { render } from '@testing-library/react';
+import validator from '@rjsf/validator-ajv8';
+
+import Form from './WrappedForm';
+
+describe('NativeSelectWidget', () => {
+  test('select field with enum', async () => {
+    const schema: RJSFSchema = {
+      type: 'object',
+      properties: {
+        color: {
+          type: 'string',
+          enum: ['red', 'green', 'blue'],
+        },
+      },
+    };
+    const uiSchema: UiSchema = {
+      color: {
+        'ui:widget': 'NativeSelectWidget',
+        'ui:placeholder': 'Pick something',
+      },
+    };
+    const { asFragment } = render(<Form schema={schema} uiSchema={uiSchema} validator={validator} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('select field multiple choice', async () => {
+    const schema: RJSFSchema = {
+      type: 'array',
+      items: {
+        type: 'string',
+        enum: ['foo', 'bar', 'fuzz', 'qux'],
+      },
+      uniqueItems: true,
+    };
+    const uiSchema: UiSchema = {
+      'ui:widget': 'NativeSelectWidget',
+      'ui:placeholder': 'Pick something',
+    };
+    const { asFragment } = render(<Form schema={schema} uiSchema={uiSchema} validator={validator} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('select field multiple choice with labels', async () => {
+    const schema: RJSFSchema = {
+      type: 'array',
+      items: {
+        type: 'number',
+        anyOf: [
+          {
+            enum: [1],
+            title: 'Blue',
+          },
+          {
+            enum: [2],
+            title: 'Red',
+          },
+          {
+            enum: [3],
+            title: 'Green',
+          },
+        ],
+      },
+      uniqueItems: true,
+    };
+    const uiSchema: UiSchema = {
+      'ui:widget': 'NativeSelectWidget',
+      'ui:placeholder': 'Pick something',
+    };
+    const { asFragment } = render(<Form schema={schema} uiSchema={uiSchema} validator={validator} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});