Skip to content

Fix: allow current element to be the selectable target by default #970

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Fix: allow current element to be the selectable target by default #970

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5c631d3
add fallback to this
madsrasmussen Nov 26, 2024
9475a7b
add to const
madsrasmussen Nov 26, 2024
52e6385
ignore click on a tags
madsrasmussen Nov 27, 2024
d7108d3
check all of composedPath
madsrasmussen Nov 27, 2024
49aae8c
ignore select on button clicks
madsrasmussen Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 17 additions & 4 deletions packages/uui-base/lib/mixins/SelectableMixin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

type Constructor<T = {}> = new (...args: any[]) => T;

export declare class SelectableMixinInterface extends LitElement {

Check warning on line 8 in packages/uui-base/lib/mixins/SelectableMixin.ts

View workflow job for this annotation

GitHub Actions / test (20) 

Class declaration should be prefixed with "UUI"
/**
* Enable the ability to select this element.
* @attr
Expand Down Expand Up @@ -39,7 +39,7 @@
* @fires {UUISelectableEvent} selected - fires when the media card is selected
* @fires {UUISelectableEvent} deselected - fires when the media card is deselected
*/
class SelectableMixinClass extends superClass {

Check warning on line 42 in packages/uui-base/lib/mixins/SelectableMixin.ts

View workflow job for this annotation

GitHub Actions / test (20) 

Class declaration should be prefixed with "UUI"
private _selectable = false;
/**
* Enable the ability to select this element.
Expand Down Expand Up @@ -95,10 +95,23 @@

readonly #onClick = (e: Event) => {
const composePath = e.composedPath();
if (
(this._selectable || (this.deselectable && this.selected)) &&
composePath.indexOf(this.selectableTarget) === 0
) {
const isActionTag = composePath.some(el => {
const element = el as HTMLElement;
return element.tagName === 'A' || element.tagName === 'BUTTON';
});

// never select when clicking on a link or button
if (isActionTag) return;

const isSelectable =
this._selectable || (this.deselectable && this.selected);

if (isSelectable && this.selectableTarget === this) {
this.#toggleSelect();
return;
}

if (isSelectable && composePath.indexOf(this.selectableTarget) === 0) {
this.#toggleSelect();
}
};
Expand Down
Loading