palantir/blueprint

BreadCrumb does not support proper keyboarding and wraps text

Open

#3,925 opened on 2020年1月16日

GitHub で見る
 (0 comments) (1 reaction) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
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

  1. If the path is really long and each breadcrumb has more than one word, the words wrap. BreadCrumbWrapping
  2. 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.
  3. Clicking the space bar or enter key (not sure which one should work here) does not call the crumb's onClick method

Expected behavior

  1. I do not want my crumbs to wrap
  2. I want to be able to tab to the overflow menu
  3. 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

  1. Add tabIndex to the overflow menu
  2. Prevent wrapping for the breadcrumb text
  3. Have the breadcrumb code catch the appropriate keys and call the onClick method.

コントリビューターガイド

BreadCrumb does not support proper keyboarding and wraps text · palantir/blueprint#3925 | Good First Issue