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)} />
+
+
>
);
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)} />
-
>
);
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;