Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ix-tree-item click and toggle issues #1633

Open
2 tasks done
piotretm opened this issue Jan 7, 2025 · 6 comments
Open
2 tasks done

ix-tree-item click and toggle issues #1633

piotretm opened this issue Jan 7, 2025 · 6 comments
Labels
Workflow: Issue created JIRA issue is created and will be analyzed

Comments

@piotretm
Copy link

piotretm commented Jan 7, 2025

Prerequisites

  • I have read the Contributing Guidelines.
  • I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Expanding the ix-tree-item is only possible by clicking the toggle. However, the cursor is always set to be a pointer even if no click action is defined.

Also, if I have an item that is not expandable clicking on the area where the toggle should be is not triggering click action.

Would be great to have an option to set this behavior in a way that items with children are always triggering toggle no matter which part I click and that regular items would trigger click in the same way.

Example from the docs can be used as a reference.

Expanded example with console logs for events.

What type of frontend framework are you seeing the problem on?

JavaScript

Which version of iX do you use?

2.6.0

Code to produce this issue.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tree example</title>
  </head>
  <body>
    <div style="height: 8rem; width: 100%">
      <ix-tree root="root" id="tree"></ix-tree>
    </div>

    <script>
      (async function () {
        await window.customElements.whenDefined('ix-tree');
        const tree = document.getElementById('tree');
        const child1 = document.getElementById('sample-child-1');

        tree.addEventListener('itemClick', () => {
          console.log('itemClick');
        });
        tree.addEventListener('toggle', () => {
          console.log('toggle');
        });

        tree.model = {
          root: {
            id: 'root',
            data: null,
            hasChildren: true,
            children: ['sample'],
          },
          sample: {
            id: 'sample',
            data: {
              name: 'Sample',
            },
            hasChildren: true,
            children: ['sample-child-1', 'sample-child-2'],
          },
          'sample-child-1': {
            id: 'sample-child-1',
            data: {
              name: 'Sample Child 1',
            },
            hasChildren: false,
            children: [],
          },
          'sample-child-2': {
            id: 'sample-child-2',
            data: {
              name: 'Sample Child 2',
            },
            hasChildren: false,
            children: [],
          },
        };
      })();
    </script>
    <script type="module" src="./init.js"></script>
  </body>
</html>
@piotretm piotretm added the triage We discuss this topic in our internal weekly label Jan 7, 2025
@nuke-ellington
Copy link
Collaborator

Hello @piotretm,

Thank you for reaching out.

Even if there are no subitems the tree items can still be selected, and therefor should show the pointer, aren't they?

@piotretm
Copy link
Author

piotretm commented Jan 7, 2025 •
edited
Loading

Hi @nuke-ellington,
I guess this should depend on the particular use case. For instance, in the example from the docs if I hover over the word 'sample' there is a pointer but if I click nothing happens (I would expect that the item is expanded).

Anyway, a bigger issue I think is that even if the expand toggle is not visible (item without children) and I click in the area where it should be, there is no click event. It is only triggered if I click the part of the row with the label.

@nuke-ellington
Copy link
Collaborator

For instance, in the example from the docs if I hover over the word 'sample' there is a pointer but if I click nothing happens (I would expect that the item is expanded).

The item will get selected, so something is happening in this case.

Anyway, a bigger issue I think is that even if the expand toggle is not visible (item without children) and I click in the area where it should be, there is no click event. It is only triggered if I click the part of the row with the label.

I agree. Backlog item created. We will have another look at that behaviour.

@nuke-ellington nuke-ellington added Workflow: Issue created JIRA issue is created and will be analyzed and removed triage We discuss this topic in our internal weekly labels Jan 8, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 8, 2025 •
edited by nuke-ellington
Loading

🤖 Hello @piotretm

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-2270

@piotretm
Copy link
Author

piotretm commented Jan 8, 2025 •
edited
Loading

Thanks. Regarding the first part, I understand that this might be the correct behavior depending on the scenario. Is there a way to expand/collapse an item instead of selecting it?

@nuke-ellington
Copy link
Collaborator

I think you should be able to set the TreeContext in response to the event, in order to override the default behaviour.
But you need to make sure the tree still acts in a predictable manner.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Workflow: Issue created JIRA issue is created and will be analyzed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nuke-ellington @piotretm