diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 25594759b10f..8a3eac219828 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -213,6 +213,16 @@ class ColorPalette extends UI5Element { } } + onAfterRendering() { + if (this.popupMode) { + if (this.showDefaultColor) { + this.focusFirstFocusableElement(); + } else { + this.focusFirstDisplayColorElement(); + } + } + } + selectColor(item: ColorPaletteItem) { if (!item.value) { return; @@ -306,7 +316,7 @@ class ColorPalette extends UI5Element { if (this.hasRecentColors) { this.focusColorElement(this.colorPaletteNavigationElements[index + 1], this._itemNavigationRecentColors); } else if (this.showDefaultColor) { - this.colorPaletteNavigationElements[0].focus(); + this.firstFocusableElement.focus(); } else { this.focusColorElement(this.displayedColors[0], this._itemNavigation); } @@ -324,7 +334,7 @@ class ColorPalette extends UI5Element { if (isUp(e) && target === this.displayedColors[0] && this.colorPaletteNavigationElements.length > 1) { e.stopPropagation(); if (this.showDefaultColor) { - this.colorPaletteNavigationElements[0].focus(); + this.firstFocusableElement.focus(); } else if (!this.showDefaultColor && this.hasRecentColors) { this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors); } else if (!this.showDefaultColor && this.showMoreColors) { @@ -337,7 +347,7 @@ class ColorPalette extends UI5Element { if (this.showDefaultColor && this.showMoreColors) { this.colorPaletteNavigationElements[2].focus(); } else if (this.showDefaultColor && !this.showMoreColors && (!this.showRecentColors || !this.recentColors[0])) { - this.colorPaletteNavigationElements[0].focus(); + this.firstFocusableElement.focus(); } else if (isRecentColorsNextElement) { this.focusColorElement(lastElementInNavigation, this._itemNavigationRecentColors); } else if (!this.showDefaultColor && this.showMoreColors) { @@ -359,7 +369,7 @@ class ColorPalette extends UI5Element { } } else if (isDown(e)) { if (this.showDefaultColor) { - this.colorPaletteNavigationElements[0].focus(); + this.firstFocusableElement.focus(); } else { e.stopPropagation(); this.focusColorElement(this.displayedColors[0], this._itemNavigation); @@ -372,6 +382,18 @@ class ColorPalette extends UI5Element { itemNavigation._focusCurrentItem(); } + focusFirstDisplayColorElement() { + this.focusColorElement(this.displayedColors[0], this._itemNavigation); + } + + focusFirstFocusableElement() { + this.firstFocusableElement.focus(); + } + + get firstFocusableElement() { + return this.colorPaletteNavigationElements[0]; + } + async _chooseCustomColor() { const colorPicker = await this.getColorPicker(); this._setColor(colorPicker.color); diff --git a/packages/main/src/ColorPalettePopover.hbs b/packages/main/src/ColorPalettePopover.hbs index 37ad23b7d953..d4dac278cda3 100644 --- a/packages/main/src/ColorPalettePopover.hbs +++ b/packages/main/src/ColorPalettePopover.hbs @@ -2,6 +2,9 @@ hide-arrow content-only-on-desktop placement-type="Bottom" + ?open="{{_open}}" + .opener="{{opener}}" + @ui5-after-close="{{onAfterClose}}" >
open
and opener
properties.
* @since 1.1.1
*/
showAt(opener: HTMLElement) {
- this._openPopover(opener);
+ console.warn("The method 'showAt' is deprecated and will be removed in future, use 'open' and 'opener' props instead."); // eslint-disable-line
+ this.open = true;
+ this.opener = opener;
}
/**
@@ -175,27 +205,20 @@ class ColorPalettePopover extends UI5Element {
* @method
* @name sap.ui.webc.main.ColorPalettePopover#openPopover
* @since 1.0.0-rc.16
- * @deprecated The method is deprecated in favour of showAt
.
+ * @deprecated The method is deprecated in favour of open
and opener
properties.
*/
openPopover(opener: HTMLElement) {
- console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead."); // eslint-disable-line
- this._openPopover(opener);
+ console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'open' and 'opener' props instead."); // eslint-disable-line
+ this.showAt(opener);
}
- _openPopover(opener: HTMLElement) {
- this._respPopover();
-
- this.responsivePopover!.showAt(opener, true);
-
- if (this.showDefaultColor) {
- this._colorPalette().colorPaletteNavigationElements[0].focus();
- } else {
- this._colorPalette().focusColorElement(this._colorPalette().colorPaletteNavigationElements[0], this._colorPalette()._itemNavigation);
- }
+ closePopover() {
+ this.open = false;
}
- closePopover() {
- this.responsivePopover!.close();
+ onAfterClose() {
+ this.closePopover();
+ this.fireEvent("close");
}
onSelectedColor(e: CustomEvent