feat(select): update popover interface to match MD spec on desktop, allow multiple values in popover interface (#23474)

resolves #23657
resolves #15500
resolves #12310
This commit is contained in:
Brandy Carney
2021-07-20 11:23:00 -04:00
committed by GitHub
parent be219a2814
commit 2c07a1566b
28 changed files with 889 additions and 92 deletions

View File

@ -1,4 +1,4 @@
import { Build, Component, ComponentInterface, Element, Host, h } from '@stencil/core';
import { Build, Component, ComponentInterface, Element, Host, Method, h } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
@ -9,6 +9,8 @@ import { isPlatform } from '../../utils/platform';
styleUrl: 'app.scss',
})
export class App implements ComponentInterface {
private focusVisible?: any;
@Element() el!: HTMLElement;
componentDidLoad() {
@ -33,11 +35,28 @@ export class App implements ComponentInterface {
if (typeof (window as any) !== 'undefined') {
import('../../utils/keyboard/keyboard').then(module => module.startKeyboardAssist(window));
}
import('../../utils/focus-visible').then(module => module.startFocusVisible());
import('../../utils/focus-visible').then(module => this.focusVisible = module.startFocusVisible());
});
}
}
/**
* @internal
* Used to set focus on an element that uses `ion-focusable`.
* Do not use this if focusing the element as a result of a keyboard
* event as the focus utility should handle this for us. This method
* should be used when we want to programmatically focus an element as
* a result of another user action. (Ex: We focus the first element
* inside of a popover when the user presents it, but the popover is not always
* presented as a result of keyboard action.)
*/
@Method()
async setFocus(elements: HTMLElement[]) {
if (this.focusVisible) {
this.focusVisible.setFocus(elements);
}
}
render() {
const mode = getIonMode(this);
return (