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

Clicking on YesNoSelectEditor behavior has changed since 5.4.1 #937

Closed
tabuchik opened this issue Dec 1, 2023 · 3 comments
Closed

Clicking on YesNoSelectEditor behavior has changed since 5.4.1 #937

tabuchik opened this issue Dec 1, 2023 · 3 comments
Labels
bug regression

Comments

@tabuchik
Copy link

tabuchik commented Dec 1, 2023

Behavior of before version 5.4.0

The select element shows options when clicked.

Behavior of after version 5.4.1

The select element doesn't show options when clicked. (It shows options only when the space key is pressed.)

Reproduction code

When we replace versions from 5.5.5 to 5.4.0, the behavior seems to change.

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick-alpine-theme.css" type="text/css" />
</head>

<body>
  <div style="position:relative">
    <div style="width:80px;">
      <div id="myGrid" class="slick-container" style="width:100%;height:500px;"></div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.core.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.interactions.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.grid.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/plugins/slick.cellrangedecorator.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/plugins/slick.cellrangeselector.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/plugins/slick.cellselectionmodel.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.formatters.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.editors.js"></script>

  <script>
    var grid;
    var data = [];
    var columns = [
      { id: "desc", name: "yesno", field: "yesno", formatter: Slick.Formatters.YesNo, editor: Slick.Editors.YesNoSelect },
    ];
    var options = {
      editable: true,
      enableCellNavigation: true,
    };

    document.addEventListener("DOMContentLoaded", function () {
      for (var i = 0; i < 10; i  ) {
        data[i] = { "yesno": true };
      }

      grid = new Slick.Grid("#myGrid", data, columns, options);
      grid.setSelectionModel(new Slick.CellSelectionModel());
    });
  </script>
</body>

</html>
@ghiscoding
Copy link
Collaborator

ghiscoding commented Dec 1, 2023 •
edited
Loading

It's working fine on the example-frozen-columns, with autoEdit enabled or disabled, it works fine (live demo is shown below, no issue).

oh actually, I had to read your issue multiple time to understand your problem. It wasn't clear that the issue is not to open it but instead happens when trying to click the select dropdown itself.

EDIT

Actually I found that the regression was introduced in v5.4.1 by PR #897, when the cell was clicked it went into the new code thinking the user wanted to start a dragging and it cancelled event bubbling so clicking the dropdown had no effect

ghiscoding pushed a commit that referenced this issue Dec 1, 2023
@ghiscoding-SE
fix: only allow row drag on cell w/dnd or cell-reorder, fix #937
1e6ead9 
- a previous PR #897 caused a regression on a cell with a select dropdown (like `Slick.Editors.YesNoSelect`), the regression was caused by the implementation of Draggable `allowDragFromClosest` which will check if current DOM element is `.slick-cell` or if not it will also try its ancestor and that caused the regression because the cell with the editor also had a `.slick-cell` and so the code taught that the user started a drag and it cancelled event bubbling which in turn also prevented the select dropdown to be clickable.
- to fix this issue we need to make sure that the cell is queried not just with `div.slick-cell` but also with certain CSS classes, we need to check if it has either `.dnd` or `.cell-reorder` to permit the dragging
@tabuchik
Copy link
Author

tabuchik commented Dec 2, 2023

@ghiscoding
Thank you!

@ghiscoding
Copy link
Collaborator

fixed in v5.5.6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug regression
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ghiscoding @tabuchik