diff --git a/packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx b/packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx index 465242346..2ac203394 100644 --- a/packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx +++ b/packages/db-ui-elements-stencil/src/components/db-input/__tests__/db-input.spec.tsx @@ -31,8 +31,8 @@ describe('db-input', () => { ` }); expect(page.root).toEqualHtml(` - - + + diff --git a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx index b804443a0..81e94e846 100644 --- a/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx +++ b/packages/db-ui-elements-stencil/src/components/db-input/db-input.tsx @@ -29,7 +29,7 @@ export class DbInput { /** * The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. */ - @Prop({ reflect: true }) autofocus = false; + @Prop({ reflect: true, attribute: 'autofocus' }) autoFocus?: boolean = false; /** * The description attribute specifies the description/hint of the input. @@ -44,7 +44,7 @@ export class DbInput { /** * The disabled attribute can be set to keep a user from clicking on the input. */ - @Prop({ reflect: true }) disabled = false; + @Prop({ reflect: true }) disabled?: boolean = false; /** * The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. @@ -154,7 +154,7 @@ export class DbInput { aria-invalid={this.ariainvalid} aria-required={this.ariarequired} autocomplete={this.autocomplete} - autofocus={this.autofocus} + autofocus={this.autoFocus} data-dirname={this.dirname} disabled={this.disabled} list={this.list} diff --git a/packages/db-ui-elements-stencil/src/components/db-input/readme.md b/packages/db-ui-elements-stencil/src/components/db-input/readme.md index 6c697d8c4..3152c57f2 100644 --- a/packages/db-ui-elements-stencil/src/components/db-input/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-input/readme.md @@ -11,11 +11,11 @@ | -------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ------------------- | | `ariainvalid` | `ariainvalid` | The ariainvalid attribute is used to indicate that the value entered into an input field does not conform to the format expected by the application. | `"false" \| "grammar" \| "spelling" \| "true"` | `null` | | `ariarequired` | `ariarequired` | The ariarequired attribute can be applied to a form element, to indicate to an AT that it is required to complete the form. | `"false" \| "true"` | `null` | +| `autoFocus` | `auto-focus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `undefined` | | `autocomplete` | `autocomplete` | User agents sometimes have features for helping users fill forms in, for example prefilling the user's address based on earlier user input. | `"off" \| "on"` | `null` | -| `autofocus` | `autofocus` | The autofocus content attribute allows the author to indicate that a control is to be focused as soon as the page is loaded, allowing the user to just start typing without having to manually focus the main control. | `boolean` | `false` | | `description` | `description` | The description attribute specifies the description/hint of the input. | `string` | `undefined` | | `dirname` | `dirname` | The dirname attribute on a form control element enables the submission of the directionality of the element, and gives the name of the control that contains this value during form submission. If such an attribute is specified, its value must not be the empty string. | `string` | `undefined` | -| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `false` | +| `disabled` | `disabled` | The disabled attribute can be set to keep a user from clicking on the input. | `boolean` | `undefined` | | `input_id` | `input_id` | The input_id of a labelable form-related element in the same document as the label element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. | `string` | `'input-' + uuid()` | | `label` _(required)_ | `label` | The label attribute specifies the caption of the input. | `string` | `undefined` | | `list` | `list` | The list attribute is used to identify an element that lists predefined options suggested to the user. | `string` | `undefined` |