js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix color picker clicks not on button or label

Browse Source
This commit is contained in:
Konnor Rogers
2024-06-18 23:14:08 -04:00
parent 4fef023bea
commit 877874813e
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/color-picker/color-picker.styles.ts
View File

@@ -342,7 +342,7 @@ export default css`
}
.form-control__input {
display: block;
display: inline-block;
}
.color-dropdown__container {

19
src/components/color-picker/color-picker.ts
View File

@@ -123,6 +123,8 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
@query('[part~="base"]') base: HTMLElement;
@query('[part~="input"]') input: WaInput;
@query('[part~="form-control-label"]') triggerLabel: HTMLElement;
@query('[part~="form-control-input"]') triggerButton: HTMLButtonElement;
// @TODO: This is a hacky way to show the "Please fill out this field", do we want the old behavior where it opens the dropdown?
// or is the new behavior okay?
@@ -1070,6 +1072,17 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
})}
part="trigger-container form-control"
slot="trigger"
@click=${(e: Event) => {
const composedPath = e.composedPath()
const triggerButton = this.triggerButton
const triggerLabel = this.triggerLabel
if (composedPath.find((el) => el === triggerButton || el === triggerLabel)) {
return
}
// Stop clicks from bubbling on anything except the button and the label. This is a hacky work around i may come to regret, but this "fixes" the issue of `<wa-dropdown>` expecting all children in the "trigger slot" to open the trigger. [Konnor]
e.stopImmediatePropagation()
}}
>
<div part="form-control-label" class="form-control__label" id="form-control-label">
<slot name="label">${this.label}</slot>
@@ -1097,7 +1110,11 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
aria-describedby="help-text"
></button>
<div part="form-control-help-text" id="help-text" class="form-control__help-text">
<div
part="form-control-help-text"
id="help-text"
class="form-control__help-text"
>
<slot name="help-text">${this.helpText}</slot>
</div>
</div>