From e339ed23b47f79941f0b522978b2d2d96b78f399 Mon Sep 17 00:00:00 2001 From: antoniof Date: Fri, 3 Sep 2021 17:54:16 +0200 Subject: [PATCH 1/2] Fixes dropdown on Web Components --- .../lib/src/components/internal/FormFields/Select/Select.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/components/internal/FormFields/Select/Select.tsx b/packages/lib/src/components/internal/FormFields/Select/Select.tsx index eb6b3e8220..2acc979d5a 100644 --- a/packages/lib/src/components/internal/FormFields/Select/Select.tsx +++ b/packages/lib/src/components/internal/FormFields/Select/Select.tsx @@ -77,7 +77,8 @@ function Select(props: SelectProps) { * @param e - MouseEvent */ const handleClickOutside = (e: MouseEvent) => { - if (!selectContainerRef.current.contains(e.target)) { + // use composedPath so it can also check when inside a web component + if (!e.composedPath().includes(selectContainerRef.current)) { setShowList(false); } }; From 18af4b36a274ef161d59d7ab331993541dacdedc Mon Sep 17 00:00:00 2001 From: antoniof Date: Mon, 6 Sep 2021 14:03:58 +0200 Subject: [PATCH 2/2] Fixes old browser compatibility --- .../src/components/internal/FormFields/Select/Select.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/lib/src/components/internal/FormFields/Select/Select.tsx b/packages/lib/src/components/internal/FormFields/Select/Select.tsx index 2acc979d5a..17b2a0bb84 100644 --- a/packages/lib/src/components/internal/FormFields/Select/Select.tsx +++ b/packages/lib/src/components/internal/FormFields/Select/Select.tsx @@ -78,7 +78,11 @@ function Select(props: SelectProps) { */ const handleClickOutside = (e: MouseEvent) => { // use composedPath so it can also check when inside a web component - if (!e.composedPath().includes(selectContainerRef.current)) { + // if composedPath is not available fallback to e.target + const clickIsOutside = e.composedPath ? + !e.composedPath().includes(selectContainerRef.current) : + !selectContainerRef.current.contains(e.target); + if (clickIsOutside) { setShowList(false); } };