fix: small bugfix for auto width not rendering (#578)

* small bugfix for auto width not rendering

* Additional margin option, useful when type=number

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: loivsen

packages/uui-input/lib/uui-input.element.ts

@@ -58,6 +58,8 @@ export class UUIInputElement extends FormControlMixin(
           var(--uui-input-border-color, var(--uui-color-border));
 
         --uui-button-height: 100%;
+        --auto-width-text-margin-right: 0;
+        --auto-width-text-margin-left: 0;
       }
 
       #control {
@@ -75,6 +77,8 @@ export class UUIInputElement extends FormControlMixin(
         z-index: -1;
         height: 0px;
         padding: 0 var(--uui-size-space-3);
+        margin: 0 var(--auto-width-text-margin-right) 0
+          var(--auto-width-text-margin-left);
       }
 
       :host([auto-width]) #input {
@@ -407,7 +411,7 @@ export class UUIInputElement extends FormControlMixin(
   }
 
   private renderInputWithAutoWidth() {
-    html`<div id="control">
+    return html`<div id="control">
       ${this.renderInput()}${this.renderAutoWidthBackground()}
     </div>`;
   }

packages/uui-input/lib/uui-input.story.ts

@@ -314,7 +314,7 @@ export const AutoWidth: Story = {
         .name=${props.name}
         .placeholder=${props.placeholder}
         .value=${props.value}
-        .autoWidth=${props.autoWidth}>
+        ?auto-width=${props.autoWidth}>
       </uui-input>
       <br /><br />
       <uui-input
@@ -329,15 +329,31 @@ export const AutoWidth: Story = {
         .name=${props.name}
         .placeholder=${props.placeholder}
         .value=${props.value}
-        .autoWidth=${props.autoWidth}>
+        ?auto-width=${props.autoWidth}>
         <uui-input
           slot="prepend"
           placeholder="Prepend auto-width"
-          .autoWidth=${props.autoWidth}></uui-input>
+          ?auto-width=${props.autoWidth}></uui-input>
         <uui-input
           slot="append"
           placeholder="Append auto-width false"></uui-input>
-      </uui-input>`,
+      </uui-input>
+
+      <br /><br />
+      <uui-input
+        .min=${props.min}
+        .max=${props.max}
+        .step=${props.step}
+        .disabled=${props.disabled}
+        .readonly=${props.readonly}
+        .error=${props.error}
+        .label=${props.label}
+        .type=${props.type}
+        .name=${props.name}
+        style="--auto-width-text-margin-right: 50px"
+        placeholder="--auto-width-text-margin-right: 50px"
+        .value=${props.value}
+        ?auto-width=${props.autoWidth}></uui-input>`,
   args: {
     autoWidth: true,
     placeholder: 'Start typing...',