From 449462d907ba81a4fc429d8a16997326dcea1f4e Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Sat, 11 Sep 2021 23:12:59 +0300 Subject: [PATCH 01/14] fix(FEC-11520): Multi dropdowns are openable in cvaa overlay --- src/components/dropdown/dropdown.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 1f1c8d125..54d468e58 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -51,6 +51,10 @@ class DropDown extends Component { } } + componentWillUnmount(): void { + console.error(''); + } + /** * is given option selected * @@ -82,8 +86,8 @@ class DropDown extends Component { * @memberof DropDown */ onClick = (e: Event): void => { - e.stopPropagation(); this.toggleDropDown(); + setTimeout(() => this.toggleDropDown(), 0); }; /** From fbd62f2ee0ef1d1da3158ef008aa4fcba2cfa8d3 Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Sun, 12 Sep 2021 21:38:29 +0300 Subject: [PATCH 02/14] fix lint --- src/components/dropdown/dropdown.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 54d468e58..09e63a3a0 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -51,10 +51,6 @@ class DropDown extends Component { } } - componentWillUnmount(): void { - console.error(''); - } - /** * is given option selected * @@ -81,11 +77,10 @@ class DropDown extends Component { /** * on click handler * - * @param {Event} e - keyboard event * @returns {void} * @memberof DropDown */ - onClick = (e: Event): void => { + onClick = (): void => { this.toggleDropDown(); setTimeout(() => this.toggleDropDown(), 0); }; From cd0b1ee3ac5fb5c3d53ebf04f692518616068148 Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Mon, 13 Sep 2021 11:34:26 +0300 Subject: [PATCH 03/14] fix --- src/components/dropdown/dropdown.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 09e63a3a0..b582996ba 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -81,7 +81,6 @@ class DropDown extends Component { * @memberof DropDown */ onClick = (): void => { - this.toggleDropDown(); setTimeout(() => this.toggleDropDown(), 0); }; From ca41d91e2886dfa0c776f55d43fbe6daa050e8eb Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Mon, 13 Sep 2021 11:40:59 +0300 Subject: [PATCH 04/14] fix lint --- src/components/dropdown/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index b582996ba..1b01119aa 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -94,7 +94,7 @@ class DropDown extends Component { onKeyDown = (e: KeyboardEvent): void => { switch (e.keyCode) { case KeyMap.ENTER: - this.onClick(e); + this.onClick(); break; case KeyMap.ESC: if (this.state.dropMenuActive) { From 1d7a50373ff85982748d01c05f7f1b85e652a35b Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Wed, 29 Sep 2021 20:05:44 +0200 Subject: [PATCH 05/14] revert --- .../cvaa-overlay/custom-captions-window.js | 12 ++++++------ src/components/dropdown/dropdown.js | 8 +++++--- src/components/seekbar/seekbar.js | 1 + 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/cvaa-overlay/custom-captions-window.js b/src/components/cvaa-overlay/custom-captions-window.js index 1496fbaea..3bbc899d1 100644 --- a/src/components/cvaa-overlay/custom-captions-window.js +++ b/src/components/cvaa-overlay/custom-captions-window.js @@ -61,10 +61,10 @@ class CustomCaptionsWindow extends Component { const edgeStyles = player.TextStyle.EdgeStyles; const standardColors = player.TextStyle.StandardColors; - const fontScaleOptions = player.TextStyle.FontSizes.map(scale => ({ - value: scale.value, - label: scale.label, - active: props.customTextStyle.fontScale === scale.value + const fontSizeOptions = player.TextStyle.FontSizes.map(size => ({ + value: size.label, + label: size.label, + active: props.customTextStyle.fontSize === size.label })); const fontColorOptions = Object.keys(standardColors).map(key => ({ @@ -97,9 +97,9 @@ class CustomCaptionsWindow extends Component { { - setTimeout(() => this.toggleDropDown(), 0); + onClick = (e: Event): void => { + e.stopPropagation(); + this.toggleDropDown(); }; /** @@ -94,7 +96,7 @@ class DropDown extends Component { onKeyDown = (e: KeyboardEvent): void => { switch (e.keyCode) { case KeyMap.ENTER: - this.onClick(); + this.onClick(e); break; case KeyMap.ESC: if (this.state.dropMenuActive) { diff --git a/src/components/seekbar/seekbar.js b/src/components/seekbar/seekbar.js index d846e7ef9..111ad825f 100644 --- a/src/components/seekbar/seekbar.js +++ b/src/components/seekbar/seekbar.js @@ -135,6 +135,7 @@ class SeekBar extends Component { return; } e.preventDefault(); // fixes firefox mouseup not firing after dragging the scrubber + e.stopPropagation(); // prevent other dragging effects this.props.updateSeekbarDraggingStatus(true); if (this.props.isDraggingActive) { let time = this.getTime(e); From a6c82a918f7c66cc1d54cdabea9e2caa5cae104a Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Wed, 29 Sep 2021 23:22:58 +0200 Subject: [PATCH 06/14] different approach --- src/components/dropdown/dropdown.js | 20 +++++++++++++++++++- src/components/menu/menu.js | 16 ---------------- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 1f1c8d125..b8f5f2f7b 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -29,6 +29,7 @@ const COMPONENT_NAME = 'DropDown'; class DropDown extends Component { state: Object; _el: HTMLDivElement; + dropDownId: number; /** * before component mounted, set initial internal state @@ -49,6 +50,7 @@ class DropDown extends Component { if (this.props.registerParentSelectedCallback) { this.props.registerParentSelectedCallback(this.toggleDropDown.bind(this)); } + document.addEventListener('click', this.handleClickOutside); } /** @@ -82,7 +84,7 @@ class DropDown extends Component { * @memberof DropDown */ onClick = (e: Event): void => { - e.stopPropagation(); + this.dropDownId = e.timeStamp; this.toggleDropDown(); }; @@ -118,6 +120,22 @@ class DropDown extends Component { this.setState({dropMenuActive: false}); }; + /** + * handler to click outside of the component event listener. + * if not mobile device and clicked outside the component, call the onClose callback + * + * @param {*} e click event + * @returns {void} + * @memberof Menu + */ + handleClickOutside = (e: Event) => { + if (this.dropDownId !== e.timeStamp) { + if (!this.props.isMobile && !this.props.isSmallSize) { + this.onClose(); + } + } + }; + /** * get active option or first option * diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js index 90496f726..a8fe5ae48 100644 --- a/src/components/menu/menu.js +++ b/src/components/menu/menu.js @@ -53,8 +53,6 @@ class Menu extends Component { * @memberof Menu */ componentDidMount() { - this.props.eventManager.listen(document, 'click', this.handleClickOutside); - if (!this.props.isMobile && !this.props.isSmallSize) { this.setState({position: this.getPosition()}); } @@ -86,20 +84,6 @@ class Menu extends Component { } } - /** - * handler to click outside of the component event listener. - * if not mobile device and clicked outside the component, call the onClose callback - * - * @param {*} e click event - * @returns {void} - * @memberof Menu - */ - handleClickOutside = (e: any) => { - if (!this.props.isMobile && !this.props.isSmallSize && this._menuElement && !this._menuElement.contains(e.target)) { - this.props.onClose(); - } - }; - /** * indication if option is active or not * From 06572b7a5c95ac782a2cef9ce6d5473c62bc959a Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Thu, 30 Sep 2021 03:10:15 +0200 Subject: [PATCH 07/14] remove on close event props --- src/components/dropdown/dropdown.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index b8f5f2f7b..1f1513397 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -129,6 +129,7 @@ class DropDown extends Component { * @memberof Menu */ handleClickOutside = (e: Event) => { + console.log(e.timeStamp, this.dropDownId); if (this.dropDownId !== e.timeStamp) { if (!this.props.isMobile && !this.props.isSmallSize) { this.onClose(); @@ -203,7 +204,7 @@ class DropDown extends Component { {!this.state.dropMenuActive ? undefined : ( - + )} From aaf92b9078f12c887713833a11add5278d331454 Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Sun, 3 Oct 2021 11:09:24 +0300 Subject: [PATCH 08/14] fix lint --- src/components/dropdown/dropdown.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 1f1513397..ca77965a0 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -129,7 +129,6 @@ class DropDown extends Component { * @memberof Menu */ handleClickOutside = (e: Event) => { - console.log(e.timeStamp, this.dropDownId); if (this.dropDownId !== e.timeStamp) { if (!this.props.isMobile && !this.props.isSmallSize) { this.onClose(); @@ -203,9 +202,7 @@ class DropDown extends Component { {label} - {!this.state.dropMenuActive ? undefined : ( - - )} + {!this.state.dropMenuActive ? undefined : } ); From b09ec9211ba33239e71e72ba559ef44e9651d2d6 Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Wed, 13 Oct 2021 13:03:16 +0300 Subject: [PATCH 09/14] back to the first solution --- src/components/dropdown/dropdown.js | 28 +++++----------------------- src/components/menu/menu.js | 16 ++++++++++++++++ 2 files changed, 21 insertions(+), 23 deletions(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index ca77965a0..056716c31 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -29,7 +29,6 @@ const COMPONENT_NAME = 'DropDown'; class DropDown extends Component { state: Object; _el: HTMLDivElement; - dropDownId: number; /** * before component mounted, set initial internal state @@ -50,7 +49,6 @@ class DropDown extends Component { if (this.props.registerParentSelectedCallback) { this.props.registerParentSelectedCallback(this.toggleDropDown.bind(this)); } - document.addEventListener('click', this.handleClickOutside); } /** @@ -79,13 +77,11 @@ class DropDown extends Component { /** * on click handler * - * @param {Event} e - keyboard event * @returns {void} * @memberof DropDown */ - onClick = (e: Event): void => { - this.dropDownId = e.timeStamp; - this.toggleDropDown(); + onClick = (): void => { + setTimeout(() => this.toggleDropDown()); }; /** @@ -120,22 +116,6 @@ class DropDown extends Component { this.setState({dropMenuActive: false}); }; - /** - * handler to click outside of the component event listener. - * if not mobile device and clicked outside the component, call the onClose callback - * - * @param {*} e click event - * @returns {void} - * @memberof Menu - */ - handleClickOutside = (e: Event) => { - if (this.dropDownId !== e.timeStamp) { - if (!this.props.isMobile && !this.props.isSmallSize) { - this.onClose(); - } - } - }; - /** * get active option or first option * @@ -202,7 +182,9 @@ class DropDown extends Component { {label} - {!this.state.dropMenuActive ? undefined : } + {!this.state.dropMenuActive ? undefined : ( + + )} ); diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js index a8fe5ae48..90496f726 100644 --- a/src/components/menu/menu.js +++ b/src/components/menu/menu.js @@ -53,6 +53,8 @@ class Menu extends Component { * @memberof Menu */ componentDidMount() { + this.props.eventManager.listen(document, 'click', this.handleClickOutside); + if (!this.props.isMobile && !this.props.isSmallSize) { this.setState({position: this.getPosition()}); } @@ -84,6 +86,20 @@ class Menu extends Component { } } + /** + * handler to click outside of the component event listener. + * if not mobile device and clicked outside the component, call the onClose callback + * + * @param {*} e click event + * @returns {void} + * @memberof Menu + */ + handleClickOutside = (e: any) => { + if (!this.props.isMobile && !this.props.isSmallSize && this._menuElement && !this._menuElement.contains(e.target)) { + this.props.onClose(); + } + }; + /** * indication if option is active or not * From c54b836cd90b7b908ba683c680eeec51582bdd94 Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Wed, 13 Oct 2021 13:30:16 +0300 Subject: [PATCH 10/14] back to the second solution --- src/components/dropdown/dropdown.js | 28 +++++++++++++++++++++++----- src/components/menu/menu.js | 16 ---------------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 056716c31..ca77965a0 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -29,6 +29,7 @@ const COMPONENT_NAME = 'DropDown'; class DropDown extends Component { state: Object; _el: HTMLDivElement; + dropDownId: number; /** * before component mounted, set initial internal state @@ -49,6 +50,7 @@ class DropDown extends Component { if (this.props.registerParentSelectedCallback) { this.props.registerParentSelectedCallback(this.toggleDropDown.bind(this)); } + document.addEventListener('click', this.handleClickOutside); } /** @@ -77,11 +79,13 @@ class DropDown extends Component { /** * on click handler * + * @param {Event} e - keyboard event * @returns {void} * @memberof DropDown */ - onClick = (): void => { - setTimeout(() => this.toggleDropDown()); + onClick = (e: Event): void => { + this.dropDownId = e.timeStamp; + this.toggleDropDown(); }; /** @@ -116,6 +120,22 @@ class DropDown extends Component { this.setState({dropMenuActive: false}); }; + /** + * handler to click outside of the component event listener. + * if not mobile device and clicked outside the component, call the onClose callback + * + * @param {*} e click event + * @returns {void} + * @memberof Menu + */ + handleClickOutside = (e: Event) => { + if (this.dropDownId !== e.timeStamp) { + if (!this.props.isMobile && !this.props.isSmallSize) { + this.onClose(); + } + } + }; + /** * get active option or first option * @@ -182,9 +202,7 @@ class DropDown extends Component { {label} - {!this.state.dropMenuActive ? undefined : ( - - )} + {!this.state.dropMenuActive ? undefined : } ); diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js index 90496f726..a8fe5ae48 100644 --- a/src/components/menu/menu.js +++ b/src/components/menu/menu.js @@ -53,8 +53,6 @@ class Menu extends Component { * @memberof Menu */ componentDidMount() { - this.props.eventManager.listen(document, 'click', this.handleClickOutside); - if (!this.props.isMobile && !this.props.isSmallSize) { this.setState({position: this.getPosition()}); } @@ -86,20 +84,6 @@ class Menu extends Component { } } - /** - * handler to click outside of the component event listener. - * if not mobile device and clicked outside the component, call the onClose callback - * - * @param {*} e click event - * @returns {void} - * @memberof Menu - */ - handleClickOutside = (e: any) => { - if (!this.props.isMobile && !this.props.isSmallSize && this._menuElement && !this._menuElement.contains(e.target)) { - this.props.onClose(); - } - }; - /** * indication if option is active or not * From 7e447061c195687015c800b67e1ace854fa36189 Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Wed, 13 Oct 2021 13:36:06 +0300 Subject: [PATCH 11/14] set dropdwonid to private --- src/components/dropdown/dropdown.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index ca77965a0..be140f2a6 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -29,7 +29,7 @@ const COMPONENT_NAME = 'DropDown'; class DropDown extends Component { state: Object; _el: HTMLDivElement; - dropDownId: number; + _dropDownId: number; /** * before component mounted, set initial internal state @@ -84,7 +84,7 @@ class DropDown extends Component { * @memberof DropDown */ onClick = (e: Event): void => { - this.dropDownId = e.timeStamp; + this._dropDownId = e.timeStamp; this.toggleDropDown(); }; @@ -129,7 +129,7 @@ class DropDown extends Component { * @memberof Menu */ handleClickOutside = (e: Event) => { - if (this.dropDownId !== e.timeStamp) { + if (this._dropDownId !== e.timeStamp) { if (!this.props.isMobile && !this.props.isSmallSize) { this.onClose(); } From 06d67fae311db2980825960d23acdc8a6cebf7ab Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Thu, 14 Oct 2021 17:03:10 +0300 Subject: [PATCH 12/14] return to the first solution with twist --- src/components/dropdown/dropdown.js | 30 +++++++---------------------- src/components/menu/menu.js | 16 +++++++++++++++ 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index be140f2a6..7d14d4475 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -29,7 +29,6 @@ const COMPONENT_NAME = 'DropDown'; class DropDown extends Component { state: Object; _el: HTMLDivElement; - _dropDownId: number; /** * before component mounted, set initial internal state @@ -50,7 +49,6 @@ class DropDown extends Component { if (this.props.registerParentSelectedCallback) { this.props.registerParentSelectedCallback(this.toggleDropDown.bind(this)); } - document.addEventListener('click', this.handleClickOutside); } /** @@ -79,13 +77,13 @@ class DropDown extends Component { /** * on click handler * - * @param {Event} e - keyboard event * @returns {void} * @memberof DropDown */ - onClick = (e: Event): void => { - this._dropDownId = e.timeStamp; - this.toggleDropDown(); + onClick = (): void => { + if (!this.state.dropMenuActive) { + setTimeout(() => this.toggleDropDown()); + } }; /** @@ -120,22 +118,6 @@ class DropDown extends Component { this.setState({dropMenuActive: false}); }; - /** - * handler to click outside of the component event listener. - * if not mobile device and clicked outside the component, call the onClose callback - * - * @param {*} e click event - * @returns {void} - * @memberof Menu - */ - handleClickOutside = (e: Event) => { - if (this._dropDownId !== e.timeStamp) { - if (!this.props.isMobile && !this.props.isSmallSize) { - this.onClose(); - } - } - }; - /** * get active option or first option * @@ -202,7 +184,9 @@ class DropDown extends Component { {label} - {!this.state.dropMenuActive ? undefined : } + {!this.state.dropMenuActive ? undefined : ( + + )} ); diff --git a/src/components/menu/menu.js b/src/components/menu/menu.js index a8fe5ae48..90496f726 100644 --- a/src/components/menu/menu.js +++ b/src/components/menu/menu.js @@ -53,6 +53,8 @@ class Menu extends Component { * @memberof Menu */ componentDidMount() { + this.props.eventManager.listen(document, 'click', this.handleClickOutside); + if (!this.props.isMobile && !this.props.isSmallSize) { this.setState({position: this.getPosition()}); } @@ -84,6 +86,20 @@ class Menu extends Component { } } + /** + * handler to click outside of the component event listener. + * if not mobile device and clicked outside the component, call the onClose callback + * + * @param {*} e click event + * @returns {void} + * @memberof Menu + */ + handleClickOutside = (e: any) => { + if (!this.props.isMobile && !this.props.isSmallSize && this._menuElement && !this._menuElement.contains(e.target)) { + this.props.onClose(); + } + }; + /** * indication if option is active or not * From 3784b461e0c69949a33047e7d2e6a8bb823d86bc Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Thu, 14 Oct 2021 17:14:26 +0300 Subject: [PATCH 13/14] flow fix --- src/components/dropdown/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 7d14d4475..d8eef680a 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -96,7 +96,7 @@ class DropDown extends Component { onKeyDown = (e: KeyboardEvent): void => { switch (e.keyCode) { case KeyMap.ENTER: - this.onClick(e); + this.onClick(); break; case KeyMap.ESC: if (this.state.dropMenuActive) { From 5255335b0ce0477e4b79a95f86e66bf12a30acc2 Mon Sep 17 00:00:00 2001 From: JonathanTGold Date: Thu, 14 Oct 2021 17:43:39 +0300 Subject: [PATCH 14/14] add comment --- src/components/dropdown/dropdown.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index d8eef680a..87c915ceb 100644 --- a/src/components/dropdown/dropdown.js +++ b/src/components/dropdown/dropdown.js @@ -82,6 +82,7 @@ class DropDown extends Component { */ onClick = (): void => { if (!this.state.dropMenuActive) { + // Prevents the menu from closing again by the handleClickOutside event (in the menu component) setTimeout(() => this.toggleDropDown()); } };