Cannot select multiple items in the Content Tree component using Shift+click

[carlos-amadeo]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have read the contributing guidelines

Describe the issue

I cannot select multiple items in the Content Tree component using Shift+click in a Macbook Pro.

https://github.com/user-attachments/assets/416db349-1f18-4812-acd0-29b230ed4040

Reduced test cases

No response

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What is the issue regarding ?

@trimble-oss/modus-web-components

What version of npm package are you using ?

No response

Priority

Medium

What product/project are you using Modus Components for ?

e-Builder / Trimble Unity Construct

What is your team/division name ?

UX team

Are you willing to contribute ?

None

Are you using Modus Web Components in production ?

No response

[github-actions[bot]]

Hello @carlos-amadeo! Thanks for opening an issue. The Modus core team will get back to you soon (usually within 24-hours) and provide guidance on how to proceed. Contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to.

Please wait until the issue is ready to be worked on before submitting a PR, or you can reach out to the core team if it is time bound. For trivial things, or bugs that don't change the expected behaviors and UI, you can go ahead and make a PR.

[kuhnboy]

I'd also add that shift-clicking on Windows (Edge / Chromium) is resulting in selecting part of the text when doing so. Example:

[carlos-amadeo]

The same bug applies to Shift + Arrows

[enowak1031]

Cannot reproduce. Closing the ticket.

[jewel-shajan]

@carlos-amadeo The video shows how multiselection works in the content tree on a MacBook, similar to its behavior on Windows. When multiselection is enabled, you can select multiple items(Not checkbox) by clicking on them.https://github.com/user-attachments/assets/422b7aee-598b-4f88-9e6b-1618b609e236

[jewel-shajan]

While using shift + click the text is also getting selected partly. So I am reopening the issue.

[coliff]

While using shift +click the text is also getting selected partly.So I am reopening the issue.

I can likely quickly fix that in a PR by adding the CSS user-select: none on the button.

[carlos-amadeo]

I was able to reproduce the issue this morning with Shift-click (not command-click) and not expecting the checkboxes to be selected. The items in between were not selected, but the text was. Using a MacBook Pro.

[enowak1031]

Since we have a work-around to shift click on each item and select multiple rows, we are deprioritizing this issue, unless we have a valid use case we can investigate.

[apaddock]

In the cases of to-do lists, we do have examples of use cases when the checkbox state may not alighn with the selection state of a list item.

Furthermore, the content tree supports and reflects selection differently when multi-select is disabled (no checkboxes, only highlighting).

[enowak1031]

• Continuous select (shift+click) should be supported
• Discontinuous select (control/command+click) should also be supported
• When multi-select is enabled, both the item should be highlighted and the checkbox should be selected (@mitch-trimble to double-check)
• Clarify when each event should be raised.

Should we consider separating checkbox state and the selection state?

[jewel-shajan]

As only one issue has been resolved and the others still require attention, the issue is being reopened.

[ElishaSamPeterPrabhu]

• Continuous select (shift+click) should be supported
• Discontinuous select (control/command+click) should also be supported
• When multi-select is enabled, both the item should be highlighted and the checkbox should be selected (@mitch-trimble to double-check)
• Clarify when each event should be raised.

Should we consider separating checkbox state and the selection state?

@mitch-trimble Could you please clarify? Thanks!

[mitch-trimble]

I'm missing context on how the content tree is being used so I'm not sure if there is a use case where you want to background select items but not use the checkboxes...

So I'm not sure how to answer this exactly, here are some thoughts/questions:

• Is it possible to map different actions to the checkbox vs selecting in the list (with the background space)?

  • If yes might want to make it configurable…

    • Allow the user to choose if they want it to select both or not
    • Default to selecting both?
      • If this causes issues with current builds default to current behavior

  • If clicking the checkbox and the menu item (background space) always map to the same function...

    • then always show checkbox checked and row selected regardless of where you click

[jewel-shajan]

@carlos-amadeo Could you review the preview at this link: https://deploy-preview-3152--moduswebcomponents.netlify.app/?path=/story/components-content-tree--multi-selection and verify if the changes look as intended?

[carlos-amadeo]

It seems to work as intended. I'm still not clear about the functional difference between selecting multiple items and selecting the checkboxes. Can you explain based on how it's coded what the purposes for the two are?

On Thu, Jan 30, 2025 at 5:04 AM Jewel Shajan @.***> wrote:

@carlos-amadeo https://github.com/carlos-amadeo Could you review the preview at this link: https://deploy-preview-3152--moduswebcomponents.netlify.app/?path=/story/components-content-tree--multi-selection and verify if the changes look as intended?

— Reply to this email directly, view it on GitHub https://github.com/trimble-oss/modus-web-components/issues/2849#issuecomment-2624040415, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZRKFYYFYKM5QOHFMQCKXQL2NH2MRAVCNFSM6AAAAABOBGFHTOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMRUGA2DANBRGU . You are receiving this because you were mentioned.Message ID: @.***>

[ElishaSamPeterPrabhu]

It seems to work as intended. I'm still not clear about the functional difference between selecting multiple items and selecting the checkboxes. Can you explain based on how it's coded what the purposes for the two are?

On Thu, Jan 30, 2025 at 5:04 AM Jewel Shajan @.***> wrote:

@carlos-amadeo https://github.com/carlos-amadeo Could you review the preview at this link: https://deploy-preview-3152--moduswebcomponents.netlify.app/?path=/story/components-content-tree--multi-selection and verify if the changes look as intended?

— Reply to this email directly, view it on GitHub https://github.com/trimble-oss/modus-web-components/issues/2849#issuecomment-2624040415, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZRKFYYFYKM5QOHFMQCKXQL2NH2MRAVCNFSM6AAAAABOBGFHTOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMRUGA2DANBRGU . You are receiving this because you were mentioned.Message ID: @.***>

This separation ensures that users can perform bulk operations through multi-selection while still marking specific nodes for unique actions using checkboxes.

Row Selection (Multi-Select with Shift+Click): This allows users to select multiple rows (nodes) in the content tree at once, typically for bulk actions like moving or deleting multiple items together. However, selecting a row does not affect the checkbox state.

Checkbox Selection (Per-Row Action): The checkbox serves a distinct purpose—it is used to mark an individual row (node) for a specific action(Opening a new tab based on that row), independent of the multi-selection. Checking a box does not impact the row selection state, and vice versa. @carlos-amadeo