FolderPicker: Cannot navigate to inside of folder when click folder title

[sters]

If you are a Box employee, you do not need to create an issue to open a pull request

Please fill out the following template so we can reproduce and fix your issue as quickly as possible!

Note: if your issue includes a potential security vulnerability, please do not file it here. Instead, email the issue to [email protected] for support.

Note: if your issue involves previewing files, please report the issue here.

Environment:

• Elements version: 23.3.0
• Via box CDN

Desktop (please complete the following information):

• OS: mac OS 14.6.1
• Browser: Chrome
• Version: 138.0.7204.184

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Steps to reproduce the problem:

Before begin, implement FolderPicker.

const picker = new Box.FolderPicker();
picker.show(
  "0", // 0 = root folder id
  "{DEVELOPER_TOKEN}", // access_token
  {
    container: `#box-folder-picker-container`,
    maxSelectable: 1,
    canUpload: false,
    canSetShareAccess: false,
    canCreateNewFolder: false,
    logoUrl: "box",
  },
);

1. Open the page
2. Click Folder title
   • Not navigate to inside of the folder.
   • Select the folder.
3. Click right blank space between folder title and radio button.
   • Navigate to inside of the folder.
   • Not select the folder.
4. Click radio button.
   • Select the folder.

Even if it not specifies maxSelectable, same behavior.

What is the expected behavior? (Screenshots can be helpful here)

1. Open the page
2. Click Folder title
   • Navigate to inside of the folder.
   • Not select the folder.
3. Click right blank space between folder title and radio button.
   • Not navigate to inside of the folder.
   • Select the folder.
4. Click radio button.
   • Select the folder.

What went wrong? (Screenshots, console logs, or HAR files can be helpful here)

Link to application or sample code:

Official demo (from https://ja.developer.box.com/guides/embed/ui-elements/picker/) has the same problem.

https://codepen.io/box-platform/pen/WRQLey

Additional context Add any other context about the problem here.

[sters]

Here is a monkey-patch workaround idea which is skipping event if the event happened time is very tight.

const component = picker.getComponent();

let ts = (new Date).getTime();

const originalSelect = component.select;
function newSelect() {
  if ((new Date).getTime() - ts < 100) {
    return;
  }
  originalSelect.apply(component, arguments);
  ts = (new Date).getTime();
}
component.select = newSelect;

const originalClick = component.onItemClick
function newClick() {
  originalClick.apply(component, arguments);
  ts = (new Date).getTime();
}
component.onItemClick = newClick;