fix: fix Enter on Subblocks blocks

RedTurtle · Nov 21, 2023 · 4427ee9 · 4427ee9
1 parent 18b721f
commit 4427ee9
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 62 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx
@@ -31,10 +31,17 @@ const messages = defineMessages({
  * @extends Component
  */
 class Edit extends SubblocksEdit {
+  constructor(props) {
+    super(props);
+    this.nodeF = React.createRef();
+  }
+
   UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.selected) {
-      if (this.state.subIndexSelected < 0) {
-        this.onSubblockChangeFocus(0);
+      if (!this.props.selected) {
+        if (this.state.subIndexSelected < 0) {
+          this.onSubblockChangeFocus(0);
+        }
       }
     } else {
       this.onSubblockChangeFocus(-1);
@@ -47,35 +54,45 @@ class Edit extends SubblocksEdit {
     }
   };
 
-  componentDidMount() {
-    const blockNode = this.props.blockNode;
+  handleClick = (e) => {
+    const hasParent = (element, className) => {
+      if (!element.parentNode) {
+        return false;
+      }
+
+      if (element.classList.contains(className)) {
+        return true;
+      }
+
+      return hasParent(element.parentNode, className);
+    };
+    const clickOutsideSubblocks =
+      !e.target.classList.contains('volto-subblocks-wrapper') &&
+      !hasParent(e.target, 'volto-subblocks-wrapper');
+
+    if (clickOutsideSubblocks) {
+      this.setState({ subIndexSelected: -1 });
+    }
+  };
 
+  componentDidMount() {
     if (this.props.selected && this.node) {
       this.node.focus();
     }
+    if (this.props.selected && this.nodeF.current) {
+      this.nodeF.current.focus();
+    }
+
     if (this.state.subblocks.length === 0) {
       this.addSubblock();
     }
 
-    if (blockNode && blockNode.current) {
-      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    if (this.nodeF && this.nodeF.current) {
+      this.nodeF.current.addEventListener('keydown', this.handleEnter, false);
+      this.nodeF.current.addEventListener('click', this.handleClick, false);
     }
   }
 
-  /**
-   * Component will receive props
-   * @method componentWillUnmount
-   * @returns {undefined}
-   */
-  componentWillUnmount() {
-    if (this.props.selected && this.node) {
-      this.node.focus();
-    }
-    const blockNode = this.props.blockNode;
-    if (blockNode && blockNode.current) {
-      blockNode.current.removeEventListener('keydown', this.handleEnter, false);
-    }
-  }
   /**
    * Render method.
    * @method render
@@ -86,8 +103,11 @@ class Edit extends SubblocksEdit {
       return <div />;
     }
     return (
-      <div className="public-ui" tabIndex="-1">
+      <div className="public-ui" tabIndex="-1" ref={this.nodeF}>
         <div className="full-width section section-muted section-inset-shadow py-5 is-edit-mode">
+          selected: {this.props.selected ? 'true' : 'false'}
+          <br />
+          subindexselected: {this.state.subIndexSelected}
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">
               <CardBody tag="div">

diff --git a/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx b/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx
@@ -44,53 +44,68 @@ class Edit extends SubblocksEdit {
   constructor(props) {
     super(props);
     this.state.selectedField = 'title';
+    this.nodeF = React.createRef();
   }
 
   UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.selected) {
       if (!this.props.selected) {
-        this.setState({ selectedField: 'title', subIndexSelected: -1 });
+        this.setState({ selectedField: 'title' });
       }
     } else {
       this.setState({ selectedField: null });
     }
   }
 
   handleEnter = (e) => {
-    if (this.props.selected) {
+    if (
+      this.props.selected &&
+      this.state.subIndexSelected < 0 &&
+      !this.state.selectedField
+    ) {
       handleKeyDownOwnFocusManagement(e, this.props);
     }
   };
 
-  componentDidMount() {
-    const blockNode = this.props.blockNode;
+  handleClick = (e) => {
+    const hasParent = (element, className) => {
+      if (!element.parentNode) {
+        return false;
+      }
+
+      if (element.classList.contains(className)) {
+        return true;
+      }
+
+      return hasParent(element.parentNode, className);
+    };
+    const clickOutsideSubblocks =
+      !e.target.classList.contains('volto-subblocks-wrapper') &&
+      !hasParent(e.target, 'volto-subblocks-wrapper');
 
+    if (clickOutsideSubblocks) {
+      this.setState({ subIndexSelected: -1 });
+    }
+  };
+
+  componentDidMount() {
     if (this.props.selected && this.node) {
       this.node.focus();
     }
+    if (this.props.selected && this.nodeF.current) {
+      this.nodeF.current.focus();
+    }
+
     if (this.state.subblocks.length === 0) {
       this.addSubblock();
     }
 
-    if (blockNode && blockNode.current) {
-      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    if (this.nodeF && this.nodeF.current) {
+      this.nodeF.current.addEventListener('keydown', this.handleEnter, false);
+      this.nodeF.current.addEventListener('click', this.handleClick, false);
     }
   }
 
-  /**
-   * Component will receive props
-   * @method componentWillUnmount
-   * @returns {undefined}
-   */
-  componentWillUnmount() {
-    if (this.props.selected && this.node) {
-      this.node.focus();
-    }
-    const blockNode = this.props.blockNode;
-    if (blockNode && blockNode.current) {
-      blockNode.current.removeEventListener('keydown', this.handleEnter, false);
-    }
-  }
   /**
    * Render method.
    * @method render
@@ -102,7 +117,7 @@ class Edit extends SubblocksEdit {
     }
 
     return (
-      <div className="public-ui" tabIndex="-1">
+      <div className="public-ui" tabIndex="-1" ref={this.nodeF}>
         <div
           className={`full-width section bg-${
             this.props.data.bg_color ?? 'primary'

diff --git a/src/components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock.jsx
@@ -112,6 +112,7 @@ class EditBlock extends SubblockEdit {
                     this.setState({ focusOn: f });
                   }}
                   block={this.props.block}
+                  index={this.props.blockIndex}
                   onChangeBlock={(block, _data) => {
                     this.props.onChangeBlock(this.props.index, _data);
                   }}
@@ -153,6 +154,8 @@ class EditBlock extends SubblockEdit {
                 onChangeBlock={(block, _data) => {
                   this.props.onChangeBlock(this.props.index, _data);
                 }}
+                block={this.props.block}
+                index={this.props.blockIndex}
                 placeholder={this.props.intl.formatMessage(
                   messages.textPlaceholder,
                 )}

diff --git a/src/components/ItaliaTheme/Blocks/IconBlocks/Edit.jsx b/src/components/ItaliaTheme/Blocks/IconBlocks/Edit.jsx
@@ -44,6 +44,7 @@ class Edit extends SubblocksEdit {
   constructor(props) {
     super(props);
     this.state.selectedField = 'title';
+    this.nodeF = React.createRef();
   }
 
   UNSAFE_componentWillReceiveProps(newProps) {
@@ -57,23 +58,51 @@ class Edit extends SubblocksEdit {
   }
 
   handleEnter = (e) => {
-    if (this.props.selected) {
+    if (
+      this.props.selected &&
+      this.state.subIndexSelected < 0 &&
+      !this.state.selectedField
+    ) {
       handleKeyDownOwnFocusManagement(e, this.props);
     }
   };
 
-  componentDidMount() {
-    const blockNode = this.props.blockNode;
+  handleClick = (e) => {
+    const hasParent = (element, className) => {
+      if (!element.parentNode) {
+        return false;
+      }
+
+      if (element.classList.contains(className)) {
+        return true;
+      }
 
+      return hasParent(element.parentNode, className);
+    };
+    const clickOutsideSubblocks =
+      !e.target.classList.contains('volto-subblocks-wrapper') &&
+      !hasParent(e.target, 'volto-subblocks-wrapper');
+
+    if (clickOutsideSubblocks) {
+      this.setState({ subIndexSelected: -1 });
+    }
+  };
+
+  componentDidMount() {
     if (this.props.selected && this.node) {
       this.node.focus();
     }
+    if (this.props.selected && this.nodeF.current) {
+      this.nodeF.current.focus();
+    }
+
     if (this.state.subblocks.length === 0) {
       this.addSubblock();
     }
 
-    if (blockNode && blockNode.current) {
-      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    if (this.nodeF && this.nodeF.current) {
+      this.nodeF.current.addEventListener('keydown', this.handleEnter, false);
+      this.nodeF.current.addEventListener('click', this.handleClick, false);
     }
   }
 
@@ -88,7 +117,7 @@ class Edit extends SubblocksEdit {
     }
 
     return (
-      <div className="public-ui" tabIndex="-1">
+      <div className="public-ui" tabIndex="-1" ref={this.nodeF}>
         <div className="full-width section py-5">
           {this.props.data.background?.[0] ? (
             <div
@@ -153,7 +182,6 @@ class Edit extends SubblocksEdit {
                 />
               </div>
             </div>
-
             <SubblocksWrapper node={this.node}>
               <Row>
                 {this.state.subblocks.map((subblock, subindex) => (
@@ -162,6 +190,7 @@ class Edit extends SubblocksEdit {
                       {...this.props}
                       data={subblock}
                       index={subindex}
+                      blockIndex={this.props.index}
                       selected={this.isSubblockSelected(subindex)}
                       {...this.subblockProps}
                       onChangeFocus={this.onSubblockChangeFocus}
@@ -184,7 +213,6 @@ class Edit extends SubblocksEdit {
                 )}
               </Row>
             </SubblocksWrapper>
-
             {this.props.data.href && this.props.data.linkMoreTitle && (
               <div className="link-button text-center my-4">
                 <UniversalLink

diff --git a/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock.jsx
@@ -51,6 +51,7 @@ class EditBlock extends SubblockEdit {
     //   }
     // });
   }
+
   /**
    * Render method.
    * @method render
@@ -79,8 +80,12 @@ class EditBlock extends SubblockEdit {
                 selected={this.props.selected && this.state.focusOn === 'title'}
                 setSelected={(f) => {
                   this.setState({ focusOn: f });
+                  if (!f) {
+                    this.props.onSubblockChangeFocus(-1);
+                  }
                 }}
                 block={this.props.block}
+                index={this.props.blockIndex}
                 onChangeBlock={(block, _data) => {
                   this.props.onChangeBlock(this.props.index, _data);
                 }}
@@ -101,7 +106,6 @@ class EditBlock extends SubblockEdit {
               />
             </div>
           </div>
-
           <div
             className="subblock-text"
             onClick={() => {
@@ -117,8 +121,12 @@ class EditBlock extends SubblockEdit {
               selected={this.props.selected && this.state.focusOn === 'text'}
               setSelected={(f) => {
                 this.setState({ focusOn: f });
+                if (!f) {
+                  this.props.onSubblockChangeFocus(-1);
+                }
               }}
               block={this.props.block}
+              index={this.props.blockIndex}
               onChangeBlock={(block, _data) => {
                 this.props.onChangeBlock(this.props.index, _data);
               }}