mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(inputs): disabled handling (#16071)
This commit is contained in:
Manu MA
@@ -13,26 +13,26 @@ The textarea component accepts the [native textarea attributes](https://develope
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type |
|
||||
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
|
||||
| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. | `string` |
|
||||
| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. | `boolean` |
|
||||
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean` |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
|
||||
| `cols` | `cols` | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. | `number \| undefined` |
|
||||
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. | `number` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the textarea. Defaults to `false`. | `boolean` |
|
||||
| `maxlength` | `maxlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | `number \| undefined` |
|
||||
| `minlength` | `minlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. | `number \| undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
|
||||
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
|
||||
| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string \| undefined` |
|
||||
| `readonly` | `readonly` | If `true`, the user cannot modify the value. Defaults to `false`. | `boolean` |
|
||||
| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` |
|
||||
| `rows` | `rows` | The number of visible text lines for the control. | `number \| undefined` |
|
||||
| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. Defaults to `false`. | `boolean` |
|
||||
| `value` | `value` | The value of the textarea. | `string` |
|
||||
| `wrap` | `wrap` | Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. | `string \| undefined` |
|
||||
| Property | Attribute | Description | Type |
|
||||
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- |
|
||||
| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. | `string` |
|
||||
| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. | `boolean` |
|
||||
| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean` |
|
||||
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` |
|
||||
| `cols` | `cols` | The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. | `number \| undefined` |
|
||||
| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `0`. | `number` |
|
||||
| `disabled` | `disabled` | If `true`, the user cannot interact with the textarea. Defaults to `false`. | `boolean` |
|
||||
| `maxlength` | `maxlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | `number \| undefined` |
|
||||
| `minlength` | `minlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. | `number \| undefined` |
|
||||
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
|
||||
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` |
|
||||
| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. | `string \| undefined` |
|
||||
| `readonly` | `readonly` | If `true`, the user cannot modify the value. Defaults to `false`. | `boolean` |
|
||||
| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` |
|
||||
| `rows` | `rows` | The number of visible text lines for the control. | `number \| undefined` |
|
||||
| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. Defaults to `false`. | `boolean` |
|
||||
| `value` | `value` | The value of the textarea. | `null \| string \| undefined` |
|
||||
| `wrap` | `wrap` | Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`. | `string \| undefined` |
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
|
||||
|
||||
import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
|
||||
import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
|
||||
import { debounceEvent, renderHiddenInput } from '../../utils/helpers';
|
||||
import { createColorClasses } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
@@ -123,14 +123,15 @@ export class Textarea implements ComponentInterface {
|
||||
/**
|
||||
* The value of the textarea.
|
||||
*/
|
||||
@Prop({ mutable: true }) value = '';
|
||||
@Prop({ mutable: true }) value?: string | null = '';
|
||||
|
||||
/**
|
||||
* Update the native input element when the value changes
|
||||
*/
|
||||
@Watch('value')
|
||||
protected valueChanged() {
|
||||
const { nativeInput, value } = this;
|
||||
const nativeInput = this.nativeInput;
|
||||
const value = this.getValue();
|
||||
if (nativeInput!.value !== value) {
|
||||
nativeInput!.value = value;
|
||||
}
|
||||
@@ -162,12 +163,14 @@ export class Textarea implements ComponentInterface {
|
||||
*/
|
||||
@Event() ionFocus!: EventEmitter<void>;
|
||||
|
||||
componentDidLoad() {
|
||||
this.ionStyle = deferEvent(this.ionStyle);
|
||||
this.debounceChanged();
|
||||
componentWillLoad() {
|
||||
this.emitStyle();
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
this.debounceChanged();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets focus on the specified `ion-textarea`. Use this method instead of the global
|
||||
* `input.focus()`.
|
||||
@@ -241,7 +244,11 @@ export class Textarea implements ComponentInterface {
|
||||
}
|
||||
|
||||
private hasValue(): boolean {
|
||||
return this.value !== '';
|
||||
return this.getValue() !== '';
|
||||
}
|
||||
|
||||
private getValue(): string {
|
||||
return this.value || '';
|
||||
}
|
||||
|
||||
hostData() {
|
||||
@@ -253,7 +260,8 @@ export class Textarea implements ComponentInterface {
|
||||
}
|
||||
|
||||
render() {
|
||||
renderHiddenInput(this.el, this.name, this.value, this.disabled);
|
||||
const value = this.getValue();
|
||||
renderHiddenInput(this.el, this.name, value, this.disabled);
|
||||
|
||||
return (
|
||||
<textarea
|
||||
@@ -277,7 +285,7 @@ export class Textarea implements ComponentInterface {
|
||||
onFocus={this.onFocus}
|
||||
onKeyDown={this.onKeyDown}
|
||||
>
|
||||
{this.value}
|
||||
{value}
|
||||
</textarea>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user