From d434051d9fb67be9486417a659aa0f157fbb70fa Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Wed, 23 Aug 2023 21:43:23 +0700 Subject: [PATCH 1/5] Implement checkHover when hovered element stuck --- src/components/Hoverable/index.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 35bbd4af7fd6..634b91197eb5 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -13,6 +13,7 @@ class Hoverable extends Component { super(props); this.handleVisibilityChange = this.handleVisibilityChange.bind(this); + this.checkHover = _.debounce(this.checkHover.bind(this), 100); this.state = { isHovered: false, @@ -23,6 +24,7 @@ class Hoverable extends Component { componentDidMount() { document.addEventListener('visibilitychange', this.handleVisibilityChange); + document.addEventListener('mouseover', this.checkHover); } componentDidUpdate(prevProps) { @@ -37,6 +39,7 @@ class Hoverable extends Component { componentWillUnmount() { document.removeEventListener('visibilitychange', this.handleVisibilityChange); + document.removeEventListener('mouseover', this.checkHover); } /** @@ -62,6 +65,18 @@ class Hoverable extends Component { this.setIsHovered(false); } + checkHover = (e) => { + if (!this.wrapperView || !this.state.isHovered) { + return; + } + + if (this.wrapperView.contains(e.target)) { + return; + } + + this.setIsHovered(false); + }; + render() { let child = this.props.children; if (_.isArray(this.props.children) && this.props.children.length === 1) { From 6f7f4e5cf6e403c57e18bca5ad4612cb553576a6 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Mon, 4 Sep 2023 21:50:02 +0700 Subject: [PATCH 2/5] disable debounce --- src/components/Hoverable/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 634b91197eb5..d1a884518055 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -13,7 +13,8 @@ class Hoverable extends Component { super(props); this.handleVisibilityChange = this.handleVisibilityChange.bind(this); - this.checkHover = _.debounce(this.checkHover.bind(this), 100); + // this.checkHover = _.debounce(this.checkHover.bind(this), 100); + this.checkHover = this.checkHover.bind(this); this.state = { isHovered: false, From ba5dc0d570b78d31f598a8bce053185f8c3a3a70 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Mon, 4 Sep 2023 22:10:59 +0700 Subject: [PATCH 3/5] Add comment to checkHover function --- src/components/Hoverable/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index d1a884518055..7353416b33c2 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -13,7 +13,6 @@ class Hoverable extends Component { super(props); this.handleVisibilityChange = this.handleVisibilityChange.bind(this); - // this.checkHover = _.debounce(this.checkHover.bind(this), 100); this.checkHover = this.checkHover.bind(this); this.state = { @@ -66,6 +65,12 @@ class Hoverable extends Component { this.setIsHovered(false); } + /** + * Checks the hover state of a component and updates it based on the event target. + * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger, + * such as when an element is removed before the mouseleave event is triggered. + * @param {Event} e - The hover event object. + */ checkHover = (e) => { if (!this.wrapperView || !this.state.isHovered) { return; From 2c35279607b417cfdcbd7305b8c45250c73a3610 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Tue, 5 Sep 2023 05:58:07 +0700 Subject: [PATCH 4/5] resolve no-invalid-this lint error --- src/components/Hoverable/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Hoverable/index.js b/src/components/Hoverable/index.js index 7353416b33c2..7b105833157a 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -57,21 +57,13 @@ class Hoverable extends Component { } } - handleVisibilityChange() { - if (document.visibilityState !== 'hidden') { - return; - } - - this.setIsHovered(false); - } - /** * Checks the hover state of a component and updates it based on the event target. * This is necessary to handle cases where the hover state might get stuck due to an unreliable mouseleave trigger, * such as when an element is removed before the mouseleave event is triggered. * @param {Event} e - The hover event object. */ - checkHover = (e) => { + checkHover(e) { if (!this.wrapperView || !this.state.isHovered) { return; } @@ -83,6 +75,14 @@ class Hoverable extends Component { this.setIsHovered(false); }; + handleVisibilityChange() { + if (document.visibilityState !== 'hidden') { + return; + } + + this.setIsHovered(false); + } + render() { let child = this.props.children; if (_.isArray(this.props.children) && this.props.children.length === 1) { From 64ac6e2efd4769b7820c56c4fb55843b08871651 Mon Sep 17 00:00:00 2001 From: Wildan Muhlis Date: Tue, 5 Sep 2023 06:13:32 +0700 Subject: [PATCH 5/5] run prettier --- 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 7b105833157a..0b560703a069 100644 --- a/src/components/Hoverable/index.js +++ b/src/components/Hoverable/index.js @@ -73,7 +73,7 @@ class Hoverable extends Component { } this.setIsHovered(false); - }; + } handleVisibilityChange() { if (document.visibilityState !== 'hidden') {