fix(input): set native input id from name prop value (#370)

Fallback to `id="input"` if no name value has been provided.
Endava · Jul 19, 2023 · f88bfe6 · f88bfe6
1 parent 028fc00
commit f88bfe6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/packages/bee-q/src/components/input/_storybook/bq-input.stories.tsx b/packages/bee-q/src/components/input/_storybook/bq-input.stories.tsx
@@ -64,7 +64,7 @@ const meta: Meta = {
     maxlength: undefined,
     min: undefined,
     minlength: undefined,
-    name: 'input',
+    name: 'bq-input',
     pattern: undefined,
     readonly: false,
     required: false,
@@ -196,11 +196,11 @@ export const ValidationStatus: Story = {
   render: (args) => html`
     <div class="flex flex-col gap-l">
       <!-- Error -->
-      ${Template({ ...args, 'validation-status': 'error' })}
+      ${Template({ ...args, name: 'bq-input-error', 'validation-status': 'error' })}
       <!-- Succes -->
-      ${Template({ ...args, 'validation-status': 'success' })}
+      ${Template({ ...args, name: 'bq-input-success', 'validation-status': 'success' })}
       <!-- Warning -->
-      ${Template({ ...args, 'validation-status': 'warning' })}
+      ${Template({ ...args, name: 'bq-input-warning', 'validation-status': 'warning' })}
     </div>
   `,
   args: {

diff --git a/packages/bee-q/src/components/input/bq-input.tsx b/packages/bee-q/src/components/input/bq-input.tsx
@@ -32,6 +32,7 @@ export class BqInput {
   private suffixElem?: HTMLElement;
 
   private debounceBqInput: TDebounce<void>;
+  private fallbackInputId = 'input';
 
   // Reference to host HTML element
   // ===================================
@@ -301,7 +302,7 @@ export class BqInput {
         {/* Label */}
         <label
           class={{ 'bq-input--label': true, hidden: !this.hasLabel }}
-          htmlFor="input"
+          htmlFor={this.name || this.fallbackInputId}
           ref={(labelElem) => (this.labelElem = labelElem)}
           part="label"
         >
@@ -326,7 +327,7 @@ export class BqInput {
           </span>
           {/* HTML Input */}
           <input
-            id="input"
+            id={this.name || this.fallbackInputId}
             class="bq-input--control__input"
             aria-disabled={this.disabled ? 'true' : 'false'}
             autoCapitalize={this.autocapitalize}