Skip to content

Commit

Permalink
feat(input): enable autofocus attribute (#729)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nowseemee
nowseemee authored Dec 10, 2021
1 parent a6296ea commit 519db5d
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 43 deletions.
45 changes: 23 additions & 22 deletions packages/components/src/components/text-field/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,29 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------- |
| `counter` | `counter` | (optional) Input counter | `boolean` | `undefined` |
| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `undefined` |
| `helperText` | `helper-text` | (optional) Input helper text | `string` | `''` |
| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` |
| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` |
| `label` | `label` | (optional) Input label | `string` | `''` |
| `list` | `list` | (optional) input list | `string` | `undefined` |
| `maxLength` | `max-length` | (optional) Input max length | `number` | `undefined` |
| `minLength` | `min-length` | (optional) Input min length | `number` | `undefined` |
| `name` | `name` | (optional) Input name | `string` | `''` |
| `placeholder` | `placeholder` | (optional) Input placeHolder | `string` | `''` |
| `readonly` | `readonly` | (optional) Input readonly | `boolean` | `undefined` |
| `required` | `required` | (optional) Input required | `boolean` | `undefined` |
| `size` | `size` | (optional) Input size | `string` | `''` |
| `status` | `status` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string` | `''` |
| `step` | `step` | (optional) the step attribute specifies the interval between legal numbers in an <input type="number"> element. | `string` | `'1'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `transparent` | `transparent` | (optional) input background transparent | `boolean` | `undefined` |
| `type` | `type` | (optional) Input type | `"date" \| "email" \| "hidden" \| "number" \| "password" \| "tel" \| "text" \| "url"` | `'text'` |
| `value` | `value` | (optional) Input value | `number \| string` | `''` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------- |
| `counter` | `counter` | (optional) Input counter | `boolean` | `undefined` |
| `disabled` | `disabled` | (optional) Input disabled | `boolean` | `undefined` |
| `helperText` | `helper-text` | (optional) Input helper text | `string` | `''` |
| `inputAutofocus` | `input-autofocus` | (optional) the input should automatically get focus when the page loads. | `boolean` | `undefined` |
| `inputId` | `input-id` | (optional) Input checkbox id | `string` | `undefined` |
| `invalid` | `invalid` | (optional) Input status | `boolean` | `false` |
| `label` | `label` | (optional) Input label | `string` | `''` |
| `list` | `list` | (optional) input list | `string` | `undefined` |
| `maxLength` | `max-length` | (optional) Input max length | `number` | `undefined` |
| `minLength` | `min-length` | (optional) Input min length | `number` | `undefined` |
| `name` | `name` | (optional) Input name | `string` | `''` |
| `placeholder` | `placeholder` | (optional) Input placeHolder | `string` | `''` |
| `readonly` | `readonly` | (optional) Input readonly | `boolean` | `undefined` |
| `required` | `required` | (optional) Input required | `boolean` | `undefined` |
| `size` | `size` | (optional) Input size | `string` | `''` |
| `status` | `status` | <span style="color:red">**[DEPRECATED]**</span> - invalid should replace status<br/><br/> | `string` | `''` |
| `step` | `step` | (optional) the step attribute specifies the interval between legal numbers in an <input type="number"> element. | `string` | `'1'` |
| `styles` | `styles` | (optional) Injected CSS styles | `string` | `undefined` |
| `transparent` | `transparent` | (optional) input background transparent | `boolean` | `undefined` |
| `type` | `type` | (optional) Input type | `"date" \| "email" \| "hidden" \| "number" \| "password" \| "tel" \| "text" \| "url"` | `'text'` |
| `value` | `value` | (optional) Input value | `number \| string` | `''` |


## Events
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/components/text-field/text-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,8 @@ export class TextField {
@Prop() step?: string = '1';
/** (optional) input list */
@Prop() list?: string;
/** (optional) the input should automatically get focus when the page loads. */
@Prop() inputAutofocus?: boolean;

/** (optional) Injected CSS styles */
@Prop() styles?: string;
Expand Down Expand Up @@ -194,6 +196,7 @@ export class TextField {
class="text-field__control"
value={this.value}
{...(!!this.name ? { name: this.name } : {})}
{...(!!this.inputAutofocus ? { autofocus: 'true' } : {})}
required={this.required}
minLength={this.minLength}
maxLength={this.maxLength}
Expand Down
Loading

0 comments on commit 519db5d

Please sign in to comment.