From 5cf02a1fb03a2a8b29e0a11112a385724cba5857 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Mon, 20 May 2024 21:56:19 +0300 Subject: [PATCH 1/4] fix: arrowUp navigation --- components/lib/tree/UITreeNode.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js index d671a8b7a0..1e33cc7c32 100644 --- a/components/lib/tree/UITreeNode.js +++ b/components/lib/tree/UITreeNode.js @@ -94,7 +94,9 @@ export const UITreeNode = React.memo((props) => { const childrenListElement = nodeElement.children[1]; if (childrenListElement) { - const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1]; + //skip droppoint + const offset = props.dragdropScope ? 2 : 1; + const lastChildElement = childrenListElement.children[childrenListElement.children.length - offset]; return findLastVisibleDescendant(lastChildElement); } @@ -360,11 +362,25 @@ export const UITreeNode = React.memo((props) => { event.preventDefault(); }; + function getPreviousElement(element) { + const next = element.previousElementSibling; + + if (next) { + //skip droppoint + if (next.getAttribute('data-pc-section') === 'droppoint' && next.previousElementSibling) { + return next.previousElementSibling; + } + } else { + return null; + } + } + const onArrowUp = (event) => { const nodeElement = event.target; + const previous = getPreviousElement(nodeElement); - if (nodeElement.previousElementSibling) { - focusRowChange(nodeElement, nodeElement.previousElementSibling, findLastVisibleDescendant(nodeElement.previousElementSibling)); + if (previous) { + focusRowChange(nodeElement, previous, findLastVisibleDescendant(previous)); } else { let parentNodeElement = getParentNodeElement(nodeElement); From a60f2b1f1e38f6b03dd20a4bff58c8d9b0a56f4b Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Mon, 20 May 2024 22:34:11 +0300 Subject: [PATCH 2/4] fix: all navigation directions --- components/doc/inputotp/basicdoc.js | 17 +++++++++++++- components/lib/tree/UITreeNode.js | 36 +++++++++++++++++++++-------- 2 files changed, 43 insertions(+), 10 deletions(-) diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js index 68e8ad5786..7424ae46fb 100644 --- a/components/doc/inputotp/basicdoc.js +++ b/components/doc/inputotp/basicdoc.js @@ -40,6 +40,10 @@ export default function BasicDemo() { ` }; + function onSubmitCallBack() { + console.log('onSubmit'); + } + return ( <> @@ -48,8 +52,19 @@ export default function BasicDemo() {

- setTokens(e.value)} /> +
+ setTokens(e.value)} /> + +
+
+ + +
); diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js index 1e33cc7c32..8b52b55e48 100644 --- a/components/lib/tree/UITreeNode.js +++ b/components/lib/tree/UITreeNode.js @@ -86,16 +86,17 @@ export const UITreeNode = React.memo((props) => { const findNextSiblingOfAncestor = (nodeElement) => { const parentNodeElement = getParentNodeElement(nodeElement); + const nextParentNodeElement = props.dragdropScope ? parentNodeElement?.nextElementSibling?.nextElementSibling : parentNodeElement.nextElementSibling - return parentNodeElement ? parentNodeElement.nextElementSibling || findNextSiblingOfAncestor(parentNodeElement) : null; + return parentNodeElement ? nextParentNodeElement || findNextSiblingOfAncestor(parentNodeElement) : null; }; const findLastVisibleDescendant = (nodeElement) => { const childrenListElement = nodeElement.children[1]; if (childrenListElement) { - //skip droppoint - const offset = props.dragdropScope ? 2 : 1; + //skip droppoint + const offset = props.dragdropScope ? 2 : 1; const lastChildElement = childrenListElement.children[childrenListElement.children.length - offset]; return findLastVisibleDescendant(lastChildElement); @@ -346,12 +347,16 @@ export const UITreeNode = React.memo((props) => { const onArrowDown = (event) => { const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target; const listElement = nodeElement.children[1]; + const nextElement = getNextElement(nodeElement) if (listElement) { - focusRowChange(nodeElement, listElement.children[0]); - } else if (nodeElement.nextElementSibling) { - focusRowChange(nodeElement, nodeElement.nextElementSibling); + console.log('1') + focusRowChange(nodeElement, props.dragdropScope ? listElement.children[1] : listElement.children[0]); + } else if (nextElement) { + console.log('2') + focusRowChange(nodeElement, nextElement); } else { + console.log('3') let nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement); if (nextSiblingAncestor) { @@ -363,12 +368,25 @@ export const UITreeNode = React.memo((props) => { }; function getPreviousElement(element) { - const next = element.previousElementSibling; + const prev = element.previousElementSibling; + + if (prev) { + //skip droppoint + if (prev.getAttribute('data-pc-section') === 'droppoint' && prev.previousElementSibling) { + return prev.previousElementSibling; + } + } else { + return null; + } + } + + function getNextElement(element) { + const next = element.nextElementSibling; if (next) { //skip droppoint - if (next.getAttribute('data-pc-section') === 'droppoint' && next.previousElementSibling) { - return next.previousElementSibling; + if (next.getAttribute('data-pc-section') === 'droppoint' && next.nextElementSibling) { + return next.nextElementSibling; } } else { return null; From ac4985277f47134093f71558325a4faeacfc4cd0 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Tue, 21 May 2024 19:13:18 +0300 Subject: [PATCH 3/4] fix: arrowDown navigation --- components/lib/tree/Tree.js | 3 +- components/lib/tree/UITreeNode.js | 58 +++++++++++++++++++++---------- 2 files changed, 42 insertions(+), 19 deletions(-) diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js index 06ed45a083..085cd7e8a9 100644 --- a/components/lib/tree/Tree.js +++ b/components/lib/tree/Tree.js @@ -68,7 +68,8 @@ export const Tree = React.memo( nodeElement.tabIndex = '-1'; } - const childElement = listElement.children[0]; + //skip droppoint + const childElement = props.dragdropScope ? listElement.children[1] : listElement.children[0]; if (childElement) { childElement.tabIndex = '0'; diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js index 8b52b55e48..0b8875585e 100644 --- a/components/lib/tree/UITreeNode.js +++ b/components/lib/tree/UITreeNode.js @@ -84,11 +84,32 @@ export const UITreeNode = React.memo((props) => { } }; + const findNextNonDroppointSibling = (nodeElement) => { + const nextNodeSibling = nodeElement.nextSibling; + + if (nextNodeSibling) { + const isNextDropPoint = nextNodeSibling.getAttribute('data-pc-section') === 'droppoint'; + + if (isNextDropPoint) { + //skip drop point and return next elemnt + if (nextNodeSibling.nextElementSibling) { + return nextNodeSibling.nextElementSibling; + } else { + //nothing after droppoint go outside + return null; + } + } + + return nextNodeSibling; + } + + return null; + }; + const findNextSiblingOfAncestor = (nodeElement) => { const parentNodeElement = getParentNodeElement(nodeElement); - const nextParentNodeElement = props.dragdropScope ? parentNodeElement?.nextElementSibling?.nextElementSibling : parentNodeElement.nextElementSibling - return parentNodeElement ? nextParentNodeElement || findNextSiblingOfAncestor(parentNodeElement) : null; + return parentNodeElement ? findNextNonDroppointSibling(parentNodeElement) || findNextSiblingOfAncestor(parentNodeElement) : null; }; const findLastVisibleDescendant = (nodeElement) => { @@ -347,16 +368,13 @@ export const UITreeNode = React.memo((props) => { const onArrowDown = (event) => { const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target; const listElement = nodeElement.children[1]; - const nextElement = getNextElement(nodeElement) + const nextElement = getNextElement(nodeElement); if (listElement) { - console.log('1') focusRowChange(nodeElement, props.dragdropScope ? listElement.children[1] : listElement.children[0]); } else if (nextElement) { - console.log('2') focusRowChange(nodeElement, nextElement); } else { - console.log('3') let nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement); if (nextSiblingAncestor) { @@ -367,31 +385,35 @@ export const UITreeNode = React.memo((props) => { event.preventDefault(); }; - function getPreviousElement(element) { + const getPreviousElement = (element) => { const prev = element.previousElementSibling; if (prev) { - //skip droppoint - if (prev.getAttribute('data-pc-section') === 'droppoint' && prev.previousElementSibling) { + if (!props.dragdropScope) { + return prev; + } else if (prev.getAttribute('data-pc-section') === 'droppoint' && prev.previousElementSibling) { + //skip droppoint return prev.previousElementSibling; } - } else { - return null; } - } - function getNextElement(element) { + return null; + }; + + const getNextElement = (element) => { const next = element.nextElementSibling; if (next) { - //skip droppoint - if (next.getAttribute('data-pc-section') === 'droppoint' && next.nextElementSibling) { + if (!props.dragdropScope) { + return next; + } else if (next.getAttribute('data-pc-section') === 'droppoint' && next.nextElementSibling) { + //skip droppoint return next.nextElementSibling; } - } else { - return null; } - } + + return null; + }; const onArrowUp = (event) => { const nodeElement = event.target; From d16e5bf31b057137904159c790de305989e256b9 Mon Sep 17 00:00:00 2001 From: Kiril Volskiy Date: Tue, 21 May 2024 20:02:08 +0300 Subject: [PATCH 4/4] refactor: simplify conditions --- components/doc/inputotp/basicdoc.js | 17 +---------------- components/lib/tree/UITreeNode.js | 14 ++------------ 2 files changed, 3 insertions(+), 28 deletions(-) diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js index 7424ae46fb..68e8ad5786 100644 --- a/components/doc/inputotp/basicdoc.js +++ b/components/doc/inputotp/basicdoc.js @@ -40,10 +40,6 @@ export default function BasicDemo() { ` }; - function onSubmitCallBack() { - console.log('onSubmit'); - } - return ( <> @@ -52,19 +48,8 @@ export default function BasicDemo() {

-
- setTokens(e.value)} /> - - + setTokens(e.value)} />
-
- - -
); diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js index 0b8875585e..0bd450827e 100644 --- a/components/lib/tree/UITreeNode.js +++ b/components/lib/tree/UITreeNode.js @@ -389,12 +389,7 @@ export const UITreeNode = React.memo((props) => { const prev = element.previousElementSibling; if (prev) { - if (!props.dragdropScope) { - return prev; - } else if (prev.getAttribute('data-pc-section') === 'droppoint' && prev.previousElementSibling) { - //skip droppoint - return prev.previousElementSibling; - } + return !props.dragdropScope ? prev : prev.previousElementSibling; } return null; @@ -404,12 +399,7 @@ export const UITreeNode = React.memo((props) => { const next = element.nextElementSibling; if (next) { - if (!props.dragdropScope) { - return next; - } else if (next.getAttribute('data-pc-section') === 'droppoint' && next.nextElementSibling) { - //skip droppoint - return next.nextElementSibling; - } + return !props.dragdropScope ? next : next.nextElementSibling; } return null;