From baa51eb2c08d16d446f76100d716043c44fb9b47 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Mon, 4 Mar 2024 10:37:47 +1100 Subject: [PATCH 1/3] fix remove pill on firefox --- package-lock.json | 4 ++-- package.json | 2 +- src/multi-select/tp-multi-select-pill.ts | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9a714b0..0d7c361 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@travelopia/web-components", - "version": "0.5.19", + "version": "0.5.20", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@travelopia/web-components", - "version": "0.5.19", + "version": "0.5.20", "license": "MIT", "devDependencies": { "@wordpress/eslint-plugin": "^17.1.0", diff --git a/package.json b/package.json index 0816f98..f16a6f1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@travelopia/web-components", - "version": "0.5.19", + "version": "0.5.20", "description": "Accessible web components for the modern web", "files": [ "dist" diff --git a/src/multi-select/tp-multi-select-pill.ts b/src/multi-select/tp-multi-select-pill.ts index 352d002..ec9d278 100644 --- a/src/multi-select/tp-multi-select-pill.ts +++ b/src/multi-select/tp-multi-select-pill.ts @@ -23,12 +23,12 @@ export class TPMultiSelectPillElement extends HTMLElement { e?.stopPropagation(); /** - * If the event is has a pointerType, which means it's a mouse event or touch event + * If the event has a clientX greater than 0, then it is a genuine click event. * Only then we remove pill. - * This will ensure, it will not get fired when a enter button is pressed. + * This will ensure, it will not get fired when the enter button is pressed. * We do this so that it does not remove the pills when enter button is pressed. */ - if ( e?.pointerType ) { + if ( e?.clientX ?? 0 > 0 ) { this.removePill(); } } From d234edd83359ae01514b4e158e75176f16afc050 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Mon, 4 Mar 2024 10:50:41 +1100 Subject: [PATCH 2/3] fix multi-select remove button cross-browser --- src/multi-select/index.html | 2 +- src/multi-select/tp-multi-select-pill.ts | 15 +++------------ src/multi-select/tp-multi-select-pills.ts | 2 +- src/multi-select/tp-multi-select-search.ts | 3 +++ 4 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/multi-select/index.html b/src/multi-select/index.html index db3490a..1c642d0 100644 --- a/src/multi-select/index.html +++ b/src/multi-select/index.html @@ -93,7 +93,7 @@ - + diff --git a/src/multi-select/tp-multi-select-pill.ts b/src/multi-select/tp-multi-select-pill.ts index ec9d278..6c98035 100644 --- a/src/multi-select/tp-multi-select-pill.ts +++ b/src/multi-select/tp-multi-select-pill.ts @@ -16,21 +16,12 @@ export class TPMultiSelectPillElement extends HTMLElement { /** * Handle button click. * - * @param {any} e Click event. + * @param {Event} e Click event. */ - handleButtonClick( e: any | null ): void { + handleButtonClick( e: Event | null ): void { e?.preventDefault(); e?.stopPropagation(); - - /** - * If the event has a clientX greater than 0, then it is a genuine click event. - * Only then we remove pill. - * This will ensure, it will not get fired when the enter button is pressed. - * We do this so that it does not remove the pills when enter button is pressed. - */ - if ( e?.clientX ?? 0 > 0 ) { - this.removePill(); - } + this.removePill(); } /** diff --git a/src/multi-select/tp-multi-select-pills.ts b/src/multi-select/tp-multi-select-pills.ts index de58910..1bc9b99 100644 --- a/src/multi-select/tp-multi-select-pills.ts +++ b/src/multi-select/tp-multi-select-pills.ts @@ -67,7 +67,7 @@ export class TPMultiSelectPillsElement extends HTMLElement { newPill.setAttribute( 'value', pillValue ); newPill.innerHTML = ` ${ multiSelectOption.getAttribute( 'label' ) ?? '' } - + `; this.appendChild( newPill ); } ); diff --git a/src/multi-select/tp-multi-select-search.ts b/src/multi-select/tp-multi-select-search.ts index 712ee2b..08919dc 100644 --- a/src/multi-select/tp-multi-select-search.ts +++ b/src/multi-select/tp-multi-select-search.ts @@ -38,6 +38,9 @@ export class TPMultiSelectSearchElement extends HTMLElement { } switch ( e.key ) { + case 'Enter': + e.preventDefault(); // Prevent inadvertent form submits. + break; case 'ArrowDown': multiSelect.setAttribute( 'open', 'yes' ); break; From e80b3cba9fc0a55cac6b053a186463579997c471 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Mon, 4 Mar 2024 10:51:34 +1100 Subject: [PATCH 3/3] bump version --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0d7c361..4ca1833 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@travelopia/web-components", - "version": "0.5.20", + "version": "0.5.21", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@travelopia/web-components", - "version": "0.5.20", + "version": "0.5.21", "license": "MIT", "devDependencies": { "@wordpress/eslint-plugin": "^17.1.0", diff --git a/package.json b/package.json index f16a6f1..390b39b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@travelopia/web-components", - "version": "0.5.20", + "version": "0.5.21", "description": "Accessible web components for the modern web", "files": [ "dist"