From 5d709f11bbab5a12694afdfa67191638043fcbe9 Mon Sep 17 00:00:00 2001 From: Getabalew Tesfaye Date: Sat, 10 Jun 2023 07:37:33 +0300 Subject: [PATCH 1/5] fix lost hover effect on long press and click --- src/components/Hoverable/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 2cbfd4b583d0..d68f2d0363e2 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -107,6 +107,10 @@ class Hoverable extends Component { } }, onBlur: (el) => { + if (el.target !== el.currentTarget) { + return; + } + if (!this.wrapperView.contains(el.relatedTarget)) { this.setIsHovered(false); } From 1d41b24f18feacc79db7fa3d8879a7f09da751d5 Mon Sep 17 00:00:00 2001 From: Getabalew Tesfaye Date: Mon, 12 Jun 2023 19:12:41 +0300 Subject: [PATCH 2/5] add check if el.target is inside wrapperView --- src/components/Hoverable/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index d68f2d0363e2..c23a37bdf271 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -107,7 +107,7 @@ class Hoverable extends Component { } }, onBlur: (el) => { - if (el.target !== el.currentTarget) { + if((el.currentTarget !== el.target) && this.wrapperView.contains(el.target)) { return; } From 55299de13500831fc77374ba3f67d404e6c42fdc Mon Sep 17 00:00:00 2001 From: Getabalew Tesfaye Date: Mon, 12 Jun 2023 19:20:15 +0300 Subject: [PATCH 3/5] fix lint --- src/components/Hoverable/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index c23a37bdf271..a9e5c167d77d 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -107,7 +107,7 @@ class Hoverable extends Component { } }, onBlur: (el) => { - if((el.currentTarget !== el.target) && this.wrapperView.contains(el.target)) { + if (el.currentTarget !== el.target && this.wrapperView.contains(el.target)) { return; } From 59577d0a604886cd07a0b493e53421a9fb12b030 Mon Sep 17 00:00:00 2001 From: Getabalew Tesfaye Date: Tue, 13 Jun 2023 20:49:56 +0300 Subject: [PATCH 4/5] add comment to explain the condition --- src/components/Hoverable/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index a9e5c167d77d..9cc0103222e9 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -107,6 +107,8 @@ class Hoverable extends Component { } }, onBlur: (el) => { + // Check if the blur event occurred due to clicking outside the element + // and the wrapperView contains the element that caused the blur and return early if (el.currentTarget !== el.target && this.wrapperView.contains(el.target)) { return; } From 4e0c464f2419eeb19b659da01e9a05516cf7a7b7 Mon Sep 17 00:00:00 2001 From: Getabalew Tesfaye Date: Thu, 15 Jun 2023 10:54:03 +0300 Subject: [PATCH 5/5] update setIsHover condition instead of returning early --- src/components/Hoverable/index.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 9cc0103222e9..b3ab1850d874 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -108,12 +108,8 @@ class Hoverable extends Component { }, onBlur: (el) => { // Check if the blur event occurred due to clicking outside the element - // and the wrapperView contains the element that caused the blur and return early - if (el.currentTarget !== el.target && this.wrapperView.contains(el.target)) { - return; - } - - if (!this.wrapperView.contains(el.relatedTarget)) { + // and the wrapperView contains the element that caused the blur and reset isHovered + if (!this.wrapperView.contains(el.target) && !this.wrapperView.contains(el.relatedTarget)) { this.setIsHovered(false); }