palantir/blueprint
GitHub で見るBreadCrumb does not support proper keyboarding and wraps text
Open
#3,925 opened on 2020年1月16日
P3Package: coreType: enhancementhelp wanted
説明
#3502 ## Environment
- Package version(s): 3.15.1
- Browser and OS versions: Chrome 79.0.3945.117 (Official Build) (64-bit)
Steps to reproduce
I have a class that displays a bread crumb for each directory in a path. I show this in my dialog which is 1000 pixels wide.
Below is my class:
`export interface IFolderBreadCrumbsProps { className?: string; path: string; minVisibleItems?: number; onBreadCrumbClicked(path: string) : void; } export class FolderBreadCrumbs extends React.PureComponent<IFolderBreadCrumbsProps, {}> {
public render() : JSX.Element {
const {minVisibleItems, path} = this.props;
const crumbs = this.makeBreadcrumbs(path);
return (
<Breadcrumbs
className={this.props.className}
minVisibleItems={minVisibleItems}
items={crumbs}/>
);
}
public makeBreadcrumbs(path: string) : IBreadcrumbProps[] {
let target = "/";
const pathSegments = path.split("/");
const breadcrumbs: IBreadcrumbProps[] = [{
text: "My Files",
target,
current: pathSegments.length === 0,
onClick: this.handleOnBreadcrumbClick
}];
if (pathSegments.length > 1) {
for (let i = 1; i < pathSegments.length; i++) {
target += pathSegments[i];
breadcrumbs.push({
text: pathSegments[i],
target,
current: pathSegments.length === 0,
onClick: this.handleOnBreadcrumbClick
});
target += "/";
}
}
return breadcrumbs;
}
private handleOnBreadcrumbClick = (event: React.MouseEvent<HTMLElement>) : void => {
const aElement = event.currentTarget as HTMLLinkElement;
const target = aElement.target;
this.props.onBreadCrumbClicked(target);
}
}`
Actual behavior
- If the path is really long and each breadcrumb has more than one word, the words wrap.

- If the path is so long that the overflow menu is visible, tabbing does not take you to the overflow menu - instead it takes you to the first un-overflowed item.
- Clicking the space bar or enter key (not sure which one should work here) does not call the crumb's onClick method
Expected behavior
- I do not want my crumbs to wrap
- I want to be able to tab to the overflow menu
- I want to click the space bar or enter key (not sure which one should work here) and if the overflow menu has focus I want the menu to display if a bread crumb has focus, I want the OnClick method to be called.
Possible solution
- Add tabIndex to the overflow menu
- Prevent wrapping for the breadcrumb text
- Have the breadcrumb code catch the appropriate keys and call the onClick method.