Merge pull request #4666 from julien/issue/4663

fix(@clayui/core): avoid scrolling when selecting a node
liferay · Feb 14, 2022 · 6ae276a · 6ae276a
2 parents 2cafb16 + 33f0f1e
commit 6ae276a
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/packages/clay-core/src/tree-view/TreeViewItem.tsx b/packages/clay-core/src/tree-view/TreeViewItem.tsx
@@ -199,6 +199,8 @@ export const TreeViewItem = React.forwardRef<
 					}}
 					onFocus={() => actions && setFocus(true)}
 					onKeyDown={(event) => {
+						event.preventDefault();
+
 						const {key} = event;
 
 						if (key === Keys.Left) {

diff --git a/packages/clay-core/stories/TreeView.stories.tsx b/packages/clay-core/stories/TreeView.stories.tsx
@@ -1192,4 +1192,69 @@ storiesOf('Components|ClayTreeView', module)
 				</TreeView>
 			</Provider>
 		);
+	})
+	.add('no scrolling', () => {
+		// Just to avoid TypeScript error with required props
+		const OptionalCheckbox = (props: any) => <Checkbox {...props} />;
+
+		OptionalCheckbox.displayName = 'ClayCheckbox';
+
+		const [items, _setItems] = React.useState([
+			{
+				children: [{name: 'Blogs'}, {name: 'Documents and Media'}],
+				name: 'Liferay Drive',
+			},
+			{
+				children: [{name: 'Blogs'}, {name: 'Documents and Media'}],
+				name: 'Repositories',
+			},
+			{
+				children: [
+					{name: 'PDF'},
+					{name: 'Word'},
+					{name: 'Google Drive'},
+					{name: 'Figma'},
+				],
+				name: 'Documents and Media',
+			},
+			{
+				children: [{name: 'One'}, {name: 'Two'}, {name: 'Three'}],
+				name: 'Another directory',
+			},
+			{
+				children: [{name: 'Four'}, {name: 'Five'}, {name: 'Six'}],
+				name: 'Last directory',
+			},
+		]);
+
+		return (
+			<Provider spritemap={spritemap} theme="cadmin">
+				<div
+					style={{
+						background: 'hotpink',
+						height: '150px',
+						overflow: 'auto',
+					}}
+				>
+					<TreeView dragAndDrop items={items} nestedKey="children">
+						{(item) => (
+							<TreeView.Item>
+								<TreeView.ItemStack>
+									<OptionalCheckbox />
+									{item.name}
+								</TreeView.ItemStack>
+								<TreeView.Group items={item.children}>
+									{(item) => (
+										<TreeView.Item>
+											<OptionalCheckbox />
+											{item.name}
+										</TreeView.Item>
+									)}
+								</TreeView.Group>
+							</TreeView.Item>
+						)}
+					</TreeView>
+				</div>
+			</Provider>
+		);
 	});