From 06fcf3633297f6319ea8e72469a25c328559adea Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Tue, 15 Aug 2023 11:24:41 +0200 Subject: [PATCH 1/3] fix: made autofocus & disabled optional for input --- .../src/components/db-input/db-input.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 b804443a08..ee1e59a64a 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 }) autofocus? = 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? = 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. From 2f3302b00469df64399fe4dae3203af75c563507 Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Tue, 15 Aug 2023 12:50:41 +0200 Subject: [PATCH 2/3] fix: issue with autofocus again --- .../src/components/db-input/db-input.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 ee1e59a64a..b3d4830993 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 }) autoFocus?: boolean; /** * 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; /** * 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} From 60dc51170006eb58d96657ba093ec9b505bc2e11 Mon Sep 17 00:00:00 2001 From: NicolasMerget Date: Tue, 15 Aug 2023 13:28:55 +0200 Subject: [PATCH 3/3] fix: issue with autofocus --- .../src/components/db-input/__tests__/db-input.spec.tsx | 4 ++-- .../src/components/db-input/db-input.tsx | 4 ++-- .../db-ui-elements-stencil/src/components/db-input/readme.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) 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 4652423463..2ac2033940 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 b3d4830993..81e94e8469 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?: boolean; + @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?: boolean; + @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. 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 6c697d8c42..3152c57f22 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` |