diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 28644d2ceb..bc3a349d5a 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -1271,7 +1271,7 @@ export namespace Components { /** * The text to display when there's no date selected yet. Using lowercase to match the input attribute */ - 'placeholder'?: string; + 'placeholder'?: string | null; /** * the value of the datetime. */ @@ -1365,7 +1365,7 @@ export namespace Components { /** * The text to display when there's no date selected yet. Using lowercase to match the input attribute */ - 'placeholder'?: string; + 'placeholder'?: string | null; /** * the value of the datetime. */ @@ -4023,11 +4023,11 @@ export namespace Components { /** * The text to display when the select is empty. */ - 'placeholder'?: string; + 'placeholder'?: string | null; /** * The text to display instead of the selected option's value. */ - 'selectedText'?: string; + 'selectedText'?: string | null; /** * the value of the select. */ @@ -4089,11 +4089,11 @@ export namespace Components { /** * The text to display when the select is empty. */ - 'placeholder'?: string; + 'placeholder'?: string | null; /** * The text to display instead of the selected option's value. */ - 'selectedText'?: string; + 'selectedText'?: string | null; /** * the value of the select. */ diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts index 78952093dd..05c0defae4 100644 --- a/core/src/components/action-sheet/action-sheet-interface.ts +++ b/core/src/components/action-sheet/action-sheet-interface.ts @@ -17,5 +17,5 @@ export interface ActionSheetButton { role?: 'cancel' | 'destructive' | 'selected' | string; icon?: string; cssClass?: string | string[]; - handler?: () => boolean | void; + handler?: () => boolean | void | Promise; } diff --git a/core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts b/core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts index 1741496183..f175f399bd 100644 --- a/core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts +++ b/core/src/components/action-sheet/test/alert-from-action-sheet/e2e.ts @@ -6,7 +6,7 @@ it('action-sheet: alertFromActionSheet', async () => { }); const presentBtn = await page.find('#alertFromActionSheet'); - await presentBtn.click(); + presentBtn.click(); const actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); @@ -15,7 +15,7 @@ it('action-sheet: alertFromActionSheet', async () => { expect(compare).toMatchScreenshot(); const openAlertBtn = await page.find({ text: 'Open Alert' }); - await openAlertBtn.click(); + openAlertBtn.click(); const alert = await page.find('ion-alert'); await alert.waitForVisible(); @@ -24,7 +24,7 @@ it('action-sheet: alertFromActionSheet', async () => { expect(compare).toMatchScreenshot(); const alertOkayBtn = await page.find({ contains: 'Okay' }); - await alertOkayBtn.click(); + alertOkayBtn.click(); await Promise.all([ alert.waitForNotVisible(), diff --git a/core/src/components/action-sheet/test/basic/e2e.ts b/core/src/components/action-sheet/test/basic/e2e.ts index 7f28557a61..8883029c11 100644 --- a/core/src/components/action-sheet/test/basic/e2e.ts +++ b/core/src/components/action-sheet/test/basic/e2e.ts @@ -6,7 +6,7 @@ it('action-sheet: basic', async () => { }); const presentBtn = await page.find('#basic'); - await presentBtn.click(); + presentBtn.click(); let actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); @@ -15,7 +15,7 @@ it('action-sheet: basic', async () => { expect(compare).toMatchScreenshot(); const backdrop = await page.find('ion-backdrop'); - await backdrop.click(); + backdrop.click(); await actionSheet.waitForNotVisible(); diff --git a/core/src/components/action-sheet/test/cancel-only/e2e.ts b/core/src/components/action-sheet/test/cancel-only/e2e.ts index 1d956f3c18..d3b037fa8d 100644 --- a/core/src/components/action-sheet/test/cancel-only/e2e.ts +++ b/core/src/components/action-sheet/test/cancel-only/e2e.ts @@ -6,7 +6,7 @@ it('action-sheet: cancelOnly', async () => { }); const presentBtn = await page.find('#cancelOnly'); - await presentBtn.click(); + presentBtn.click(); const actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); diff --git a/core/src/components/action-sheet/test/custom-css/e2e.ts b/core/src/components/action-sheet/test/custom-css/e2e.ts index b39b7b6019..28bf3fdb03 100644 --- a/core/src/components/action-sheet/test/custom-css/e2e.ts +++ b/core/src/components/action-sheet/test/custom-css/e2e.ts @@ -6,7 +6,7 @@ it('action-sheet: cssClass', async () => { }); const presentBtn = await page.find('#cssClass'); - await presentBtn.click(); + presentBtn.click(); const actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); diff --git a/core/src/components/action-sheet/test/icons/e2e.ts b/core/src/components/action-sheet/test/icons/e2e.ts index df105c7d47..e7767c7bc2 100644 --- a/core/src/components/action-sheet/test/icons/e2e.ts +++ b/core/src/components/action-sheet/test/icons/e2e.ts @@ -6,7 +6,7 @@ it('action-sheet: icons', async () => { }); const presentBtn = await page.find('#icons'); - await presentBtn.click(); + presentBtn.click(); const actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); diff --git a/core/src/components/action-sheet/test/no-backdrop-dismiss/e2e.ts b/core/src/components/action-sheet/test/no-backdrop-dismiss/e2e.ts index d7d38b782c..f431ccfafe 100644 --- a/core/src/components/action-sheet/test/no-backdrop-dismiss/e2e.ts +++ b/core/src/components/action-sheet/test/no-backdrop-dismiss/e2e.ts @@ -6,7 +6,7 @@ it('action-sheet: noBackdropDismiss', async () => { }); const presentBtn = await page.find('#noBackdropDismiss'); - await presentBtn.click(); + presentBtn.click(); let actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); @@ -15,7 +15,7 @@ it('action-sheet: noBackdropDismiss', async () => { expect(compare).toMatchScreenshot(); const backdrop = await page.find('ion-backdrop'); - await backdrop.click(); + backdrop.click(); compare = await page.compareScreenshot(`dismissed`); expect(compare).toMatchScreenshot(); @@ -24,7 +24,7 @@ it('action-sheet: noBackdropDismiss', async () => { expect(isVisible).toBe(true); const cancel = await page.find('.action-sheet-cancel'); - await cancel.click(); + cancel.click(); await actionSheet.waitForNotVisible(); diff --git a/core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts b/core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts index df1cb2c3c4..41caa94f38 100644 --- a/core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts +++ b/core/src/components/action-sheet/test/scroll-without-cancel/e2e.ts @@ -6,7 +6,7 @@ it('action-sheet: scrollWithoutCancel', async () => { }); const presentBtn = await page.find('#scrollWithoutCancel'); - await presentBtn.click(); + presentBtn.click(); const actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); diff --git a/core/src/components/action-sheet/test/scrollable-options/e2e.ts b/core/src/components/action-sheet/test/scrollable-options/e2e.ts index f5549a7ea3..7a9f8ea220 100644 --- a/core/src/components/action-sheet/test/scrollable-options/e2e.ts +++ b/core/src/components/action-sheet/test/scrollable-options/e2e.ts @@ -6,7 +6,7 @@ it('action-sheet: scrollableOptions', async () => { }); const presentBtn = await page.find('#scrollableOptions'); - await presentBtn.click(); + presentBtn.click(); const actionSheet = await page.find('ion-action-sheet'); await actionSheet.waitForVisible(); diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index 9072d5f3ca..c4b6144cb2 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -155,7 +155,7 @@ export class Alert implements ComponentInterface, OverlayInterface { type: i.type || 'text', name: i.name || `${index}`, placeholder: i.placeholder || '', - value: (i.value != null) ? i.value : '', + value: i.value || '', label: i.label, checked: !!i.checked, disabled: !!i.disabled, diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index 96943da9cf..803207692f 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -6,7 +6,6 @@ :host { --placeholder-color: #{$datetime-ios-placeholder-color}; - --padding-top: #{$datetime-ios-padding-top}; --padding-end: #{$datetime-ios-padding-end}; --padding-bottom: #{$datetime-ios-padding-bottom}; diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index fa9d74ed92..3712891ef9 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/core/src/components/datetime/datetime.md.scss @@ -6,7 +6,6 @@ :host { --placeholder-color: #{$datetime-md-placeholder-color}; - --padding-top: #{$datetime-md-padding-top}; --padding-end: #{$datetime-md-padding-end}; --padding-bottom: #{$datetime-md-padding-bottom}; diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss index 76ecb87af3..e2844a638f 100644 --- a/core/src/components/datetime/datetime.scss +++ b/core/src/components/datetime/datetime.scss @@ -17,15 +17,15 @@ display: flex; position: relative; + min-width: $datetime-min-width; + min-height: $datetime-min-height; + font-family: $font-family-base; text-overflow: ellipsis; white-space: nowrap; - min-width: $datetime-min-width; - min-height: $datetime-min-height; - overflow: hidden; } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 523f0a7214..dce5cda74d 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -25,7 +25,7 @@ export class Datetime implements ComponentInterface { @Element() el!: HTMLIonDatetimeElement; - @State() text?: string; + @State() text?: string | null; @Prop({ connect: 'ion-picker-controller' }) pickerCtrl!: HTMLIonPickerControllerElement; @@ -174,7 +174,7 @@ export class Datetime implements ComponentInterface { * The text to display when there's no date selected yet. * Using lowercase to match the input attribute */ - @Prop() placeholder?: string; + @Prop() placeholder?: string | null; /** * the value of the datetime. diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md index 3870742f08..6dfd770aee 100644 --- a/core/src/components/datetime/readme.md +++ b/core/src/components/datetime/readme.md @@ -223,7 +223,7 @@ dates in JavaScript. | `monthValues` | -- | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number[]`, `number`, `string` | | `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` | | `pickerOptions` | -- | Any additional options that the picker interface can accept. See the [Picker API docs](../../picker/Picker) for the picker options. | `PickerOptions` | -| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `string` | +| `placeholder` | `placeholder` | The text to display when there's no date selected yet. Using lowercase to match the input attribute | `string`, `null` | | `value` | -- | the value of the datetime. | `any` | | `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` | diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 7297c6ddbf..d8ac6a5f8a 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -51,8 +51,8 @@ Since select uses the alert, action sheet and popover interfaces, options can be | `multiple` | `multiple` | If true, the select can accept multiple values. | `boolean` | | `name` | `name` | The name of the control, which is submitted with the form data. | `string` | | `okText` | `ok-text` | The text to display on the ok button. Default: `OK`. | `string` | -| `placeholder` | `placeholder` | The text to display when the select is empty. | `string` | -| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `string` | +| `placeholder` | `placeholder` | The text to display when the select is empty. | `string`, `null` | +| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `string`, `null` | | `value` | -- | the value of the select. | `any`, `null` | diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index e074dd6ca3..39abcbb9ec 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -27,7 +27,7 @@ export class Select implements ComponentInterface { @State() isExpanded = false; @State() keyFocus = false; - @State() text?: string; + @State() text?: string | null; /** * The mode determines which platform styles to use. @@ -53,7 +53,7 @@ export class Select implements ComponentInterface { /** * The text to display when the select is empty. */ - @Prop() placeholder?: string; + @Prop() placeholder?: string | null; /** * The name of the control, which is submitted with the form data. @@ -63,7 +63,7 @@ export class Select implements ComponentInterface { /** * The text to display instead of the selected option's value. */ - @Prop() selectedText?: string; + @Prop() selectedText?: string | null; /** * If true, the select can accept multiple values. diff --git a/core/src/utils/input-interface.ts b/core/src/utils/input-interface.ts index f366bcaa74..3856755671 100644 --- a/core/src/utils/input-interface.ts +++ b/core/src/utils/input-interface.ts @@ -11,8 +11,8 @@ export interface InputChangeEvent { } export interface SelectInputChangeEvent { - value: any | any[] | undefined; - text: string | undefined; + value: any | any[] | undefined | null; + text: string | undefined | null; } export interface StyleEvent { diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts index b3645a2ce3..ef7a9a6e76 100644 --- a/core/src/utils/overlays.ts +++ b/core/src/utils/overlays.ts @@ -22,28 +22,24 @@ export function createOverlay(element: T, opts: return element.componentOnReady(); } -function closeTopOverlay(doc: Document) { - const lastOverlay = getOverlay(doc); - if (lastOverlay && lastOverlay.backdropDismiss) { - return lastOverlay.dismiss(undefined, BACKDROP); - } - return Promise.resolve(); -} - export function connectListeners(doc: Document) { if (lastId === 0) { lastId = 1; doc.addEventListener('ionBackButton', ev => { const lastOverlay = getOverlay(doc); - // We use the overlayIndex property to be sure this node is an overlay - if (lastOverlay && lastOverlay.overlayIndex) { - (ev as BackButtonEvent).detail.register(100, () => closeTopOverlay(doc)); + if (lastOverlay && lastOverlay.backdropDismiss) { + (ev as BackButtonEvent).detail.register(100, () => { + return lastOverlay.dismiss(undefined, BACKDROP); + }); } }); doc.addEventListener('keyup', ev => { if (ev.key === 'Escape') { - closeTopOverlay(doc); + const lastOverlay = getOverlay(doc); + if (lastOverlay && lastOverlay.backdropDismiss) { + lastOverlay.dismiss(undefined, BACKDROP); + } } }); } @@ -58,7 +54,7 @@ export function dismissOverlay(doc: Document, data: any, role: string | undefine } export function getOverlays(doc: Document, overlayTag?: string): HTMLIonOverlayElement[] { - const overlays = Array.from(getAppRoot(doc).children) as HTMLIonOverlayElement[]; + const overlays = (Array.from(getAppRoot(doc).children) as HTMLIonOverlayElement[]).filter(c => c.overlayIndex > 0); if (overlayTag === undefined) { return overlays; }