Merge pull request #27 from AokiApp/yuki-js/replace-select-with-nativeselect

Author: yuki-js

packages/mantine/src/widgets/SelectWidget.tsx

@@ -9,7 +9,7 @@ import {
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
-import { MultiSelect, Select } from '@mantine/core';
+import { MultiSelect, NativeSelect } from '@mantine/core';
 import { createErrors } from '../utils/createErrors';
 import { useFieldContext } from '../templates/FieldTemplate';
 
@@ -83,28 +83,25 @@ function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extend
       />
     );
   } else {
+    const valuedData = (enumOptions || []).map(({ value, label }, i) => {
+      const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
+      return { value: String(i), label, disabled };
+    });
+    const data = [{ value: '-1', label: placeholder || '' }, ...valuedData];
     return (
-      <Select
-        allowDeselect
-        checkIconPosition='right'
-        clearable={!required}
-        data={(enumOptions || []).map(({ value, label }, i) => {
-          const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
-          return { value: String(i), label, disabled };
-        })}
+      <NativeSelect
+        data={data}
         description={description}
         disabled={disabled || readonly}
         error={createErrors<T>(rawErrors, hideError)}
         label={labelValue(label, hideLabel, false)}
         autoFocus={autofocus}
         required={required}
-        searchable
-        value={selectedIndices as string | null}
-        onChange={handleChange}
-        onDropdownClose={handleBlur}
-        onDropdownOpen={handleFocus}
+        value={selectedIndices ?? '-1'}
+        onChange={(event) => handleChange(event.currentTarget.value)}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
         aria-describedby={ariaDescribedByIds<T>(id)}
-        placeholder={placeholder}
         className='armt-widget-select armt-widget-select-single'
       />
     );