Skip to content

Commit ef6895a

Browse files
manucorporatmanucorporat
authored
fix(inputs): disabled handling (ionic-team#16071)
1 parent 4d3ad67 commit ef6895a

File tree

36 files changed

+319
-230
lines changed

36 files changed

+319
-230
lines changed

‎angular/src/directives/proxies.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -564,13 +564,13 @@ export class Radio {
564564
}
565565

566566
export declare interface RadioGroup extends StencilComponents<'IonRadioGroup'> {}
567-
@Component({ selector: 'ion-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['allowEmptySelection', 'name', 'disabled', 'value'] })
567+
@Component({ selector: 'ion-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['allowEmptySelection', 'name', 'value'] })
568568
export class RadioGroup {
569569
ionChange: EventEmitter<CustomEvent>;
570570

571571
constructor(r: ElementRef) {
572572
const el = r.nativeElement;
573-
proxyInputs(this, el, ['allowEmptySelection', 'name', 'disabled', 'value']);
573+
proxyInputs(this, el, ['allowEmptySelection', 'name', 'value']);
574574
proxyOutputs(this, el, ['ionChange']);
575575
}
576576
}

‎core/src/components.d.ts

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1292,7 +1292,7 @@ export namespace Components {
12921292
/**
12931293
* The value of the datetime as a valid ISO 8601 datetime string.
12941294
*/
1295-
'value'?: string;
1295+
'value'?: string | null;
12961296
/**
12971297
* Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
12981298
*/
@@ -1386,7 +1386,7 @@ export namespace Components {
13861386
/**
13871387
* The value of the datetime as a valid ISO 8601 datetime string.
13881388
*/
1389-
'value'?: string;
1389+
'value'?: string | null;
13901390
/**
13911391
* Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
13921392
*/
@@ -1847,7 +1847,7 @@ export namespace Components {
18471847
/**
18481848
* The value of the input.
18491849
*/
1850-
'value': string;
1850+
'value'?: string | null;
18511851
}
18521852
interface IonInputAttributes extends StencilHTMLAttributes {
18531853
/**
@@ -1989,7 +1989,7 @@ export namespace Components {
19891989
/**
19901990
* The value of the input.
19911991
*/
1992-
'value'?: string;
1992+
'value'?: string | null;
19931993
}
19941994

19951995
interface IonItemDivider {
@@ -2207,7 +2207,7 @@ export namespace Components {
22072207
*/
22082208
'mode': Mode;
22092209
/**
2210-
* The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
2210+
* The position determines where and how the label behaves inside an item.
22112211
*/
22122212
'position'?: 'fixed' | 'stacked' | 'floating';
22132213
}
@@ -2225,7 +2225,7 @@ export namespace Components {
22252225
*/
22262226
'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
22272227
/**
2228-
* The position determines where and how the label behaves inside an item. Possible values are: 'inline' | 'fixed' | 'stacked' | 'floating'
2228+
* The position determines where and how the label behaves inside an item.
22292229
*/
22302230
'position'?: 'fixed' | 'stacked' | 'floating';
22312231
}
@@ -2564,7 +2564,7 @@ export namespace Components {
25642564
*/
25652565
'contentId'?: string;
25662566
/**
2567-
* If `true`, the menu is disabled. Default `false`.
2567+
* If `true`, the menu is disabled. Defaults to `false`.
25682568
*/
25692569
'disabled': boolean;
25702570
/**
@@ -2596,7 +2596,7 @@ export namespace Components {
25962596
*/
25972597
'side': Side;
25982598
/**
2599-
* If `true`, swiping the menu is enabled. Default `true`.
2599+
* If `true`, swiping the menu is enabled. Defaults to `true`.
26002600
*/
26012601
'swipeGesture': boolean;
26022602
/**
@@ -2614,7 +2614,7 @@ export namespace Components {
26142614
*/
26152615
'contentId'?: string;
26162616
/**
2617-
* If `true`, the menu is disabled. Default `false`.
2617+
* If `true`, the menu is disabled. Defaults to `false`.
26182618
*/
26192619
'disabled'?: boolean;
26202620
/**
@@ -2650,7 +2650,7 @@ export namespace Components {
26502650
*/
26512651
'side'?: Side;
26522652
/**
2653-
* If `true`, swiping the menu is enabled. Default `true`.
2653+
* If `true`, swiping the menu is enabled. Defaults to `true`.
26542654
*/
26552655
'swipeGesture'?: boolean;
26562656
/**
@@ -3308,14 +3308,10 @@ export namespace Components {
33083308

33093309
interface IonRadioGroup {
33103310
/**
3311-
* If `true`, the radios can be deselected. Default false.
3311+
* If `true`, the radios can be deselected. Defaults to `false`.
33123312
*/
33133313
'allowEmptySelection': boolean;
33143314
/**
3315-
* If `true`, the user cannot interact with the radio group. Default false.
3316-
*/
3317-
'disabled': boolean;
3318-
/**
33193315
* The name of the control, which is submitted with the form data.
33203316
*/
33213317
'name': string;
@@ -3326,14 +3322,10 @@ export namespace Components {
33263322
}
33273323
interface IonRadioGroupAttributes extends StencilHTMLAttributes {
33283324
/**
3329-
* If `true`, the radios can be deselected. Default false.
3325+
* If `true`, the radios can be deselected. Defaults to `false`.
33303326
*/
33313327
'allowEmptySelection'?: boolean;
33323328
/**
3333-
* If `true`, the user cannot interact with the radio group. Default false.
3334-
*/
3335-
'disabled'?: boolean;
3336-
/**
33373329
* The name of the control, which is submitted with the form data.
33383330
*/
33393331
'name'?: string;
@@ -3371,7 +3363,7 @@ export namespace Components {
33713363
/**
33723364
* the value of the radio.
33733365
*/
3374-
'value': any | null;
3366+
'value'?: any | null;
33753367
}
33763368
interface IonRadioAttributes extends StencilHTMLAttributes {
33773369
/**
@@ -3814,7 +3806,7 @@ export namespace Components {
38143806

38153807
interface IonSearchbar {
38163808
/**
3817-
* If `true`, enable searchbar animation. Default `false`.
3809+
* If `true`, enable searchbar animation. Defaults to `false`.
38183810
*/
38193811
'animated': boolean;
38203812
/**
@@ -3862,11 +3854,11 @@ export namespace Components {
38623854
*/
38633855
'setFocus': () => void;
38643856
/**
3865-
* If `true`, show the cancel button. Default `false`.
3857+
* If `true`, show the cancel button. Defaults to `false`.
38663858
*/
38673859
'showCancelButton': boolean;
38683860
/**
3869-
* If `true`, enable spellcheck on the input. Default `false`.
3861+
* If `true`, enable spellcheck on the input. Defaults to `false`.
38703862
*/
38713863
'spellcheck': boolean;
38723864
/**
@@ -3876,11 +3868,11 @@ export namespace Components {
38763868
/**
38773869
* the value of the searchbar.
38783870
*/
3879-
'value': string;
3871+
'value'?: string | null;
38803872
}
38813873
interface IonSearchbarAttributes extends StencilHTMLAttributes {
38823874
/**
3883-
* If `true`, enable searchbar animation. Default `false`.
3875+
* If `true`, enable searchbar animation. Defaults to `false`.
38843876
*/
38853877
'animated'?: boolean;
38863878
/**
@@ -3948,11 +3940,11 @@ export namespace Components {
39483940
*/
39493941
'searchIcon'?: string;
39503942
/**
3951-
* If `true`, show the cancel button. Default `false`.
3943+
* If `true`, show the cancel button. Defaults to `false`.
39523944
*/
39533945
'showCancelButton'?: boolean;
39543946
/**
3955-
* If `true`, enable spellcheck on the input. Default `false`.
3947+
* If `true`, enable spellcheck on the input. Defaults to `false`.
39563948
*/
39573949
'spellcheck'?: boolean;
39583950
/**
@@ -3962,7 +3954,7 @@ export namespace Components {
39623954
/**
39633955
* the value of the searchbar.
39643956
*/
3965-
'value'?: string;
3957+
'value'?: string | null;
39663958
}
39673959

39683960
interface IonSegmentButton {
@@ -3975,7 +3967,7 @@ export namespace Components {
39753967
*/
39763968
'color'?: Color;
39773969
/**
3978-
* If `true`, the user cannot interact with the segment button. Default false.
3970+
* If `true`, the user cannot interact with the segment button. Defaults to `false`.
39793971
*/
39803972
'disabled': boolean;
39813973
/**
@@ -3997,7 +3989,7 @@ export namespace Components {
39973989
*/
39983990
'color'?: Color;
39993991
/**
4000-
* If `true`, the user cannot interact with the segment button. Default false.
3992+
* If `true`, the user cannot interact with the segment button. Defaults to `false`.
40013993
*/
40023994
'disabled'?: boolean;
40033995
/**
@@ -4067,7 +4059,7 @@ export namespace Components {
40674059
/**
40684060
* The text value of the option.
40694061
*/
4070-
'value'?: any;
4062+
'value'?: any | null;
40714063
}
40724064
interface IonSelectOptionAttributes extends StencilHTMLAttributes {
40734065
/**
@@ -4089,7 +4081,7 @@ export namespace Components {
40894081
/**
40904082
* The text value of the option.
40914083
*/
4092-
'value'?: any;
4084+
'value'?: any | null;
40934085
}
40944086

40954087
interface IonSelectPopover {
@@ -4816,7 +4808,7 @@ export namespace Components {
48164808
/**
48174809
* The value of the textarea.
48184810
*/
4819-
'value': string;
4811+
'value'?: string | null;
48204812
/**
48214813
* Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`.
48224814
*/
@@ -4910,7 +4902,7 @@ export namespace Components {
49104902
/**
49114903
* The value of the textarea.
49124904
*/
4913-
'value'?: string;
4905+
'value'?: string | null;
49144906
/**
49154907
* Indicates how the control wraps text. Possible values are: `"hard"`, `"soft"`, `"off"`.
49164908
*/
@@ -5102,7 +5094,7 @@ export namespace Components {
51025094
*/
51035095
'color'?: Color;
51045096
/**
5105-
* If `true`, the user cannot interact with the toggle. Default false.
5097+
* If `true`, the user cannot interact with the toggle. Defaults to `false`.
51065098
*/
51075099
'disabled': boolean;
51085100
/**
@@ -5116,7 +5108,7 @@ export namespace Components {
51165108
/**
51175109
* the value of the toggle.
51185110
*/
5119-
'value': string;
5111+
'value'?: string | null;
51205112
}
51215113
interface IonToggleAttributes extends StencilHTMLAttributes {
51225114
/**
@@ -5128,7 +5120,7 @@ export namespace Components {
51285120
*/
51295121
'color'?: Color;
51305122
/**
5131-
* If `true`, the user cannot interact with the toggle. Default false.
5123+
* If `true`, the user cannot interact with the toggle. Defaults to `false`.
51325124
*/
51335125
'disabled'?: boolean;
51345126
/**
@@ -5158,7 +5150,7 @@ export namespace Components {
51585150
/**
51595151
* the value of the toggle.
51605152
*/
5161-
'value'?: string;
5153+
'value'?: string | null;
51625154
}
51635155

51645156
interface IonToolbar {

‎core/src/components/checkbox/checkbox.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
22

33
import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
4-
import { deferEvent, renderHiddenInput } from '../../utils/helpers';
4+
import { renderHiddenInput } from '../../utils/helpers';
55
import { createColorClasses, hostContext } from '../../utils/theme';
66

77
@Component({
@@ -78,10 +78,6 @@ export class Checkbox implements ComponentInterface {
7878
this.emitStyle();
7979
}
8080

81-
componentDidLoad() {
82-
this.ionStyle = deferEvent(this.ionStyle);
83-
}
84-
8581
@Watch('checked')
8682
checkedChanged(isChecked: boolean) {
8783
this.ionChange.emit({

‎core/src/components/datetime/datetime.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
22

33
import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
4-
import { clamp, deferEvent } from '../../utils/helpers';
4+
import { clamp } from '../../utils/helpers';
55
import { hostContext } from '../../utils/theme';
66

77
import { DatetimeData, LocaleData, convertDataToISO, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
@@ -179,7 +179,7 @@ export class Datetime implements ComponentInterface {
179179
/**
180180
* The value of the datetime as a valid ISO 8601 datetime string.
181181
*/
182-
@Prop({ mutable: true }) value?: string;
182+
@Prop({ mutable: true }) value?: string | null;
183183

184184
/**
185185
* Update the datetime value when the value changes
@@ -212,7 +212,6 @@ export class Datetime implements ComponentInterface {
212212
// first see if locale names were provided in the inputs
213213
// then check to see if they're in the config
214214
// if neither were provided then it will use default English names
215-
this.ionStyle = deferEvent(this.ionStyle);
216215
this.locale = {
217216
// this.locale[type] = convertToArrayOfStrings((this[type] ? this[type] : this.config.get(type), type);
218217
monthNames: convertToArrayOfStrings(this.monthNames, 'monthNames'),
@@ -222,9 +221,6 @@ export class Datetime implements ComponentInterface {
222221
};
223222

224223
this.updateDatetimeValue(this.value);
225-
}
226-
227-
componentDidLoad() {
228224
this.emitStyle();
229225
}
230226

@@ -502,7 +498,7 @@ export class Datetime implements ComponentInterface {
502498
this.text = renderDatetime(template, this.datetimeValue, this.locale);
503499
}
504500

505-
hasValue(): boolean {
501+
private hasValue(): boolean {
506502
const val = this.datetimeValue;
507503
return Object.keys(val).length > 0;
508504
}
@@ -538,7 +534,6 @@ export class Datetime implements ComponentInterface {
538534
onClick={this.open.bind(this)}
539535
class="datetime-cover"
540536
>
541-
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
542537
</button>
543538
];
544539
}

‎core/src/components/datetime/readme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ dates in JavaScript.
224224
| `pickerFormat` | `picker-format` | The format of the date and time picker columns the user selects. A datetime input can have one or many datetime parts, each getting their own column which allow individual selection of that particular datetime part. For example, year and month columns are two individually selectable columns which help choose an exact date from the datetime picker. Each column follows the string parse format. Defaults to use `displayFormat`. | `string \| undefined` |
225225
| `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `PickerOptions \| undefined` |
226226
| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `null \| string \| undefined` |
227-
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `string \| undefined` |
227+
| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` |
228228
| `yearValues` | -- | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` |
229229

230230

‎core/src/components/datetime/test/basic/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
</ion-item>
4343

4444
<ion-item>
45-
<ion-label>MM DD YY</ion-label>
45+
<ion-label position="floating">MM DD YY</ion-label>
4646
<ion-datetime display-format="MM DD YY" placeholder="Select Date"></ion-datetime>
4747
</ion-item>
4848

0 commit comments

Comments
 (0)