From f88bfe61c1042c54c9db6120f02d99991d099b6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dabiel=20Gonz=C3=A1lez=20Ramos?=
 <dgonzalezr@users.noreply.github.com>
Date: Wed, 19 Jul 2023 10:54:56 +0300
Subject: [PATCH] fix(input): set native input `id` from `name` prop value
 (#370)

Fallback to `id="input"` if no name value has been provided.
---
 .../src/components/input/_storybook/bq-input.stories.tsx  | 8 ++++----
 packages/bee-q/src/components/input/bq-input.tsx          | 5 +++--
 2 files changed, 7 insertions(+), 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
index bdd60100a..11a61786d 100644
--- 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
index ba2a04101..872214250 100644
--- 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}