search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.52k stars 1.31k forks source link

[data grid] Multi filtering not working #11884

Closed saeonny closed 9 months ago

saeonny commented 9 months ago

Steps to reproduce

Link to live example: (required)

Steps:

  1. I copied and paste into my next.js project 
    
import * as React from 'react';
import { DataGridPro, GridToolbar } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

export default function BasicExampleDataGridPro() { const { data } = useDemoData({ dataSet: 'Employee', visibleFields: VISIBLE_FIELDS, rowLength: 100, });

return ( <div style={{ height: 400, width: '100%' }}> <DataGridPro {...data} slots={{ toolbar: GridToolbar }} />

); }


+ i am using the minimals template

### Current behavior

![image](https://github.com/mui/mui-x/assets/25571363/78584a97-59f0-4269-8026-f1de8b24982f)

### Expected behavior

![image](https://github.com/mui/mui-x/assets/25571363/5e971021-d82c-40aa-9a1a-e4a2cb38d210)
 multi filter is not working 
 i dont see the " Add filter"  

### Context

_No response_

### Your environment

<details>
  <summary><code>npx @mui/envinfo</code></summary>

System: OS: Windows 11 10.0.22621

npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.26 @mui/core-downloads-tracker: 5.14.20 @mui/envinfo: ^2.0.17 => 2.0.17 @mui/icons-material: 5.15.6 @mui/lab: ^5.0.0-alpha.155 => 5.0.0-alpha.155 @mui/material: ^5.14.20 => 5.14.20 @mui/private-theming: 5.14.20 @mui/styled-engine: 5.14.20 @mui/system: 5.14.20 @mui/types: 7.2.10 @mui/utils: 5.14.20 @mui/x-data-grid: 6.19.2 @mui/x-data-grid-generator: ^6.19.2 => 6.19.2 @mui/x-data-grid-premium: 6.19.2 @mui/x-data-grid-pro: ^6.19.2 => 6.19.2 @mui/x-license-pro: latest => 6.10.2 @types/react: ^18.2.43 => 18.2.43 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.3.3 => 5.3.3


</details>

**Search keywords**: multi filters
michelengelen commented 9 months ago

Hey @saeonny could you provider us with a minimal reproduction on codesandbox or stackblitz? You can use the templates from this doc section as a starting point: Multi filters

I cannot determine where the problem lies from just the screenshots! Thanks! 🙇🏼

saeonny commented 9 months ago

Hey @saeonny could you provider us with a minimal reproduction on codesandbox or stackblitz? You can use the templates from this doc section as a starting point: Multi filters

I cannot determine where the problem lies from just the screenshots! Thanks! 🙇🏼

example I copied exactly same code into my next.js minimal cc template project, but I dont see this image "+ Add filter" when i click "Filter" in my project.

michelengelen commented 9 months ago

@saeonny I just installed it the way you have it and it works on my end.

Screenshot 2024-02-01 at 11 34 40

There have to be changes made that prevent it from rendering for you. Could you please try and see if it is maybe hidden? Or something else? As mentioned: without the code where this happens and with it being no problem in the basic template on our side it is not possible for us to find the issue. Please try to provide a minimal example where we can see the issue or at least a detailed step-by-step guide. Thanks! 🙇🏼

saeonny commented 9 months ago

Hi @michelengelen , i guess the footerpart is hidden or diabled image Here is the Element 

<div role="tooltip" class="MuiPopper-root MuiDataGrid-panel css-n3z9fz-MuiPopper-root-MuiDataGrid-panel" id=":r12:" aria-labelledby=":r11:" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(-24px, 220px);" data-popper-placement="bottom-end">
   <div class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation8 MuiDataGrid-paper css-146nmx0-MuiPaper-root-MuiDataGrid-paper">
      <div tabindex="0" data-testid="sentinelStart"></div>
      <div tabindex="-1" class="MuiDataGrid-panelWrapper css-1miuj5f-MuiDataGrid-panelWrapper">
         <div class="MuiDataGrid-panelContent css-1oqie25-MuiDataGrid-panelContent">
            <div class="MuiDataGrid-filterForm css-l089rs-MuiDataGrid-filterForm" data-id="87904">
               <div class="MuiFormControl-root MuiDataGrid-filterFormDeleteIcon css-rne967-MuiFormControl-root-MuiDataGrid-filterFormDeleteIcon">
                  <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-13fmiiq-MuiButtonBase-root-MuiIconButton-root" tabindex="0" type="button" aria-label="Delete" title="Delete">
                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="component-iconify MuiBox-root css-1t9pz9x iconify iconify--eva" width="1em" height="1em" viewBox="0 0 24 24">
                        <path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"></path>
                     </svg>
                     <span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span>
                  </button>
               </div>
               <div class="MuiFormControl-root MuiDataGrid-filterFormLogicOperatorInput css-1wajqak-MuiFormControl-root-MuiDataGrid-filterFormLogicOperatorInput">
                  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary Mui-disabled MuiInputBase-formControl  css-ungyea-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root">
                     <select class="MuiNativeSelect-select MuiNativeSelect-outlined Mui-disabled MuiInputBase-input MuiOutlinedInput-input Mui-disabled css-zjy4g4-MuiNativeSelect-select-MuiInputBase-input-MuiOutlinedInput-input" disabled="" aria-invalid="false" aria-label="Logic operator">
                        <option value="and">And</option>
                        <option value="or">Or</option>
                     </select>
                     <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiNativeSelect-icon MuiNativeSelect-iconOutlined Mui-disabled css-r8qczq-MuiSvgIcon-root-MuiNativeSelect-icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
                        <path d="M12,16 C11.7663478,16.0004565 11.5399121,15.9190812 11.36,15.77 L5.36,10.77 C4.93474074,10.4165378 4.87653776,9.78525926 5.23,9.36 C5.58346224,8.93474074 6.21474074,8.87653776 6.64,9.23 L12,13.71 L17.36,9.39 C17.5665934,9.2222295 17.8315409,9.14373108 18.0961825,9.17188444 C18.3608241,9.2000378 18.6033268,9.33252029 18.77,9.54 C18.9551341,9.74785947 19.0452548,10.0234772 19.0186853,10.3005589 C18.9921158,10.5776405 18.8512608,10.8311099 18.63,11 L12.63,15.83 C12.444916,15.955516 12.2231011,16.0153708 12,16 Z"></path>
                     </svg>
                     <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-gcgov3-MuiOutlinedInput-notchedOutline">
                        <legend class="css-ihdtdm"><span class="notranslate">​</span></legend>
                     </fieldset>
                  </div>
               </div>
               <div class="MuiFormControl-root MuiDataGrid-filterFormColumnInput css-q68e8e-MuiFormControl-root-MuiDataGrid-filterFormColumnInput">
                  <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1ws1cwf-MuiFormLabel-root-MuiInputLabel-root" data-shrink="true" for=":r3s:" id=":r3t:">Columns</label>
                  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl  css-ungyea-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root">
                     <select class="MuiNativeSelect-select MuiNativeSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-zjy4g4-MuiNativeSelect-select-MuiInputBase-input-MuiOutlinedInput-input" aria-invalid="false" id=":r3s:">
                        <option value="id">id</option>
                        <option value="name">Name</option>
                        <option value="website">Website</option>
                        <option value="rating">Rating</option>
                        <option value="email">Email</option>
                        <option value="phone">Phone</option>
                        <option value="username">Username</option>
                        <option value="city">City</option>
                        <option value="country">Country</option>
                        <option value="company">Company</option>
                        <option value="position">Position</option>
                        <option value="lastUpdated">Updated on</option>
                        <option value="dateCreated">Created on</option>
                        <option value="isAdmin">Is admin?</option>
                        <option value="salary">Salary</option>
                     </select>
                     <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiNativeSelect-icon MuiNativeSelect-iconOutlined css-r8qczq-MuiSvgIcon-root-MuiNativeSelect-icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
                        <path d="M12,16 C11.7663478,16.0004565 11.5399121,15.9190812 11.36,15.77 L5.36,10.77 C4.93474074,10.4165378 4.87653776,9.78525926 5.23,9.36 C5.58346224,8.93474074 6.21474074,8.87653776 6.64,9.23 L12,13.71 L17.36,9.39 C17.5665934,9.2222295 17.8315409,9.14373108 18.0961825,9.17188444 C18.3608241,9.2000378 18.6033268,9.33252029 18.77,9.54 C18.9551341,9.74785947 19.0452548,10.0234772 19.0186853,10.3005589 C18.9921158,10.5776405 18.8512608,10.8311099 18.63,11 L12.63,15.83 C12.444916,15.955516 12.2231011,16.0153708 12,16 Z"></path>
                     </svg>
                     <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-gcgov3-MuiOutlinedInput-notchedOutline">
                        <legend class="css-14lo706"><span>Columns</span></legend>
                     </fieldset>
                  </div>
               </div>
               <div class="MuiFormControl-root MuiDataGrid-filterFormOperatorInput css-17vwkjt-MuiFormControl-root-MuiDataGrid-filterFormOperatorInput">
                  <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1ws1cwf-MuiFormLabel-root-MuiInputLabel-root" data-shrink="true" for=":r3u:" id=":r3v:">Operator</label>
                  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl  css-ungyea-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root">
                     <select class="MuiNativeSelect-select MuiNativeSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-zjy4g4-MuiNativeSelect-select-MuiInputBase-input-MuiOutlinedInput-input" aria-invalid="false" id=":r3u:">
                        <option value="contains">contains</option>
                        <option value="equals">equals</option>
                        <option value="startsWith">starts with</option>
                        <option value="endsWith">ends with</option>
                        <option value="isEmpty">is empty</option>
                        <option value="isNotEmpty">is not empty</option>
                        <option value="isAnyOf">is any of</option>
                     </select>
                     <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiNativeSelect-icon MuiNativeSelect-iconOutlined css-r8qczq-MuiSvgIcon-root-MuiNativeSelect-icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24">
                        <path d="M12,16 C11.7663478,16.0004565 11.5399121,15.9190812 11.36,15.77 L5.36,10.77 C4.93474074,10.4165378 4.87653776,9.78525926 5.23,9.36 C5.58346224,8.93474074 6.21474074,8.87653776 6.64,9.23 L12,13.71 L17.36,9.39 C17.5665934,9.2222295 17.8315409,9.14373108 18.0961825,9.17188444 C18.3608241,9.2000378 18.6033268,9.33252029 18.77,9.54 C18.9551341,9.74785947 19.0452548,10.0234772 19.0186853,10.3005589 C18.9921158,10.5776405 18.8512608,10.8311099 18.63,11 L12.63,15.83 C12.444916,15.955516 12.2231011,16.0153708 12,16 Z"></path>
                     </svg>
                     <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-gcgov3-MuiOutlinedInput-notchedOutline">
                        <legend class="css-14lo706"><span>Operator</span></legend>
                     </fieldset>
                  </div>
               </div>
               <div class="MuiFormControl-root MuiDataGrid-filterFormValueInput css-g1ps0c-MuiFormControl-root-MuiDataGrid-filterFormValueInput">
                  <div class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root">
                     <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeMedium MuiInputLabel-outlined css-1ws1cwf-MuiFormLabel-root-MuiInputLabel-root" data-shrink="true" for=":r40:" id=":r40:-label">Value</label>
                     <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-199bmts-MuiInputBase-root-MuiOutlinedInput-root">
                        <input aria-invalid="false" id=":r40:" placeholder="Filter value" class="MuiInputBase-input MuiOutlinedInput-input css-27ibiq-MuiInputBase-input-MuiOutlinedInput-input" type="text" value="">
                        <fieldset aria-hidden="true" class="MuiOutlinedInput-notchedOutline css-gcgov3-MuiOutlinedInput-notchedOutline">
                           <legend class="css-14lo706"><span>Value</span></legend>
                        </fieldset>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="MuiDataGrid-panelFooter css-1wmgw8j-MuiDataGrid-panelFooter">
            <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-disableElevation css-nqme70-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">
               <span class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon">
                  <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AddIcon">
                     <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
                  </svg>
               </span>
               Add filter<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span>
            </button>
            <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-disableElevation css-nqme70-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">
               <span class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon">
                  <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="DeleteIcon">
                     <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"></path>
                  </svg>
               </span>
               Remove all<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span>
            </button>
         </div>
      </div>
      <div tabindex="0" data-testid="sentinelEnd"></div>
   </div>
</div>

file: DatagridPannel.txt

Then , in this case how to enable it? is this rendering issue?

michelengelen commented 9 months ago

This is the part that you need to check:

 <div class="MuiDataGrid-panelFooter css-1wmgw8j-MuiDataGrid-panelFooter">
    <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-disableElevation css-nqme70-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">
       <span class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon">
          <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="AddIcon">
             <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path>
          </svg>
       </span>
       Add filter<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span>
    </button>
    <button class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-disableElevation MuiButton-root MuiButton-text MuiButton-textInherit MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorInherit MuiButton-disableElevation css-nqme70-MuiButtonBase-root-MuiButton-root" tabindex="0" type="button">
       <span class="MuiButton-startIcon MuiButton-iconSizeMedium css-gcc2o7-MuiButton-startIcon">
          <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-17ceore-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="DeleteIcon">
             <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12 1.41 1.41L13.41 14l2.12 2.12-1.41 1.41L12 15.41l-2.12 2.12-1.41-1.41L10.59 14l-2.13-2.12zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"></path>
          </svg>
       </span>
       Remove all<span class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"></span>
    </button>
 </div>

Since it is in the DOM it should be rendered, but appears to be hidden. Could you check if there is a class definition that falsely targets this element? And maybe adds a display: hidden or similar?

saeonny commented 9 months ago

Yes, I think it's fixed. I'm not sure if it's the right way, but in the template src > theme > overrides > components > data-grid.tsx:

=> result : image

michelengelen commented 9 months ago

Yes, that's it!