refactor(select): fix input empty name and id set issue

apps/demo/src/Views/Ui/components/FormWidgets/CountryPicker.tsx

@@ -434,7 +434,7 @@ const selectedLocale = i18n.language;
           favorites={["NP", "US", "GB"]}
           label={t("countryPicker.labels.single")}
           locale={locale}
-          name="countryPickerFav"
+          name="favoriteCountry"
           placeholder={t("countryPicker.placeholders.single")}
           value={favoriteValue}
           onChange={(value: string) => setFavoriteValue(value)}

apps/demo/src/Views/Ui/components/FormWidgets/CurrencyPicker.tsx

@@ -63,7 +63,7 @@ export const CurrencyPickerDemo = () => {
       <Section title={t("currencyPicker.usage.basic")}>
         <CurrencyPicker
           label={t("currencyPicker.label")}
-          name="currencyPicker"
+          name="currency"
           options={options}
           value={singleSelectCurrencyValue}
           onChange={(value: string) => setSingleSelectCurrencyValue(value)}
@@ -100,7 +100,7 @@ const [singleSelectCurrencyValue, setSingleSelectCurrencyValue] = useState<strin
       <Section title={t("currencyPicker.usage.multiple")}>
         <CurrencyPicker
           label={t("currencyPicker.label")}
-          name="currencyPicker"
+          name="multipleCurrency"
           options={options}
           multiple={true}
           value={multiSelectCurrencyValue}
@@ -133,7 +133,7 @@ const [multiSelectCurrencyValue, setMultiSelectCurrencyValue] = useState<string[
       <Section title={t("currencyPicker.usage.extensiveOptions")}>
         <CurrencyPicker
           label={t("currencyPicker.label")}
-          name="currencyPicker"
+          name="extensiveCurrency"
           options={currencies}
           value={extensiveOptionsCurrencyPickerValue}
           onChange={(value: string) =>

apps/demo/src/Views/Ui/components/FormWidgets/Select.tsx

@@ -368,7 +368,7 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
       <Section title={t("select.usage.disabled")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="disbledSelect"
           options={[{ value: "NP", label: "Nepal" }]}
           value="NP"
           onChange={() => {}}
@@ -390,7 +390,7 @@ const [singleSelectValue, setSingleSelectValue] = useState<string>("");
         <Select
           disableSearch
           label={t("select.label")}
-          name="select"
+          name="disableSearchSelect"
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -426,7 +426,7 @@ const [disableSearchSelectValue, setDisableSearchSelectValue] = useState<string>
       <Section title={t("select.usage.multiple")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="multiselect"
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -464,7 +464,7 @@ const [multiselectValue, setMultiselectValue] = useState<string[]>([]);
       <Section title={t("select.usage.renderValue")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="customRenderSelect"
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -520,7 +520,7 @@ const renderSelectedValue = (
       <Section title={t("select.usage.renderOption")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="customOptionSelect"
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -569,7 +569,7 @@ const renderOption = (option: Option) => {
       <Section title={t("select.usage.key")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="keySelect"
           options={[
             { country: "France", code: "fr" },
             { country: "Germany", code: "de" },
@@ -611,7 +611,7 @@ const [value, setValue] = useState<string>("");
           label={t("select.roleSelectLabel")}
           labelKey="name"
           loading={loading}
-          name="select"
+          name="serverSelect"
           noOptionsMessage={t("select.noRoleOptions")}
           options={rolesOptions}
           serverSearchHelperText={t("select.serverSearchHelper")}
@@ -656,7 +656,7 @@ const fetchRoles = async (searchInput: string) => {
       <Section title={t("select.usage.withTooltip")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="tooltipSelect"
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -706,7 +706,7 @@ const [selectedCountries, setSelectedCountries] = useState<string[]>([]);
       <Section title={t("select.usage.invalid")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="invalidSelect"
           options={[
             { label: "France", value: "FR" },
             { label: "Germany", value: "DE" },
@@ -745,7 +745,7 @@ const [selectedValue, setSelectedValue] = useState<string>("");
       <Section title={t("select.usage.group")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="groupSelect"
           options={[
             {
               label: "Europe",
@@ -806,7 +806,7 @@ const [singleSelectGroupValue, setSingleSelectGroupValue] = useState<string>("")
       <Section title={t("select.usage.groupMultiSelect")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="groupMultiselect"
           options={[
             {
               label: "Europe",
@@ -864,7 +864,7 @@ const [multiSelectGroupValue, setMultiSelectGroupValue] = useState<string[]>([])
       <Section title={t("select.usage.groupMultiSelectDisabled")}>
         <Select
           label={t("select.label")}
-          name="select"
+          name="disabledMultiselect"
           disableGroupSelect={true}
           options={[
             {

packages/ui/src/FormWidgets/DebouncedInput/index.tsx

@@ -60,6 +60,7 @@ export const DebouncedInput = forwardRef<
         type={type}
         value={inputValue}
         ref={reference}
+        name="debounced-input"
         {...inputProperties}
       />
     );

packages/ui/src/FormWidgets/Select/__test__/__snapshots__/Select.snapshot.test.tsx.snap

@@ -114,9 +114,9 @@ exports[`Select Component > should render correctly with a placeholder 1`] = `
           class="field debounced-input"
         >
           <input
-            class="input-field "
-            id=""
-            name=""
+            class="input-field placeholder-select"
+            id="placeholder-select"
+            name="placeholder-select"
             placeholder="Select a language"
             tabindex="-1"
             type="text"

packages/ui/src/FormWidgets/Select/index.tsx

@@ -691,6 +691,7 @@ export const Select = <T extends string | number>({
             }}
             disabled={disabled}
             defaultValue={searchInput}
+            name={name}
             tabIndex={-1}
           />
         ) : (
@@ -726,7 +727,12 @@ export const Select = <T extends string | number>({
 
   return (
     <div ref={selectReference} className={`field ${className}`.trimEnd()}>
-      {label && <label htmlFor={name}>{label}</label>}
+      {label &&
+        (!disabled && !disableSearch ? (
+          <label htmlFor={name}>{label}</label>
+        ) : (
+          <span className="label">{label}</span>
+        ))}
 
       <div className="select" ref={setReferenceElement}>
         {renderSelect()}

packages/ui/src/assets/css/form-widgets/field.css

@@ -7,7 +7,8 @@
   width: 100%;
 }
 
-.field > label {
+.field > label,
+.field > .label {
   font-weight: 500;
 }