Skip to content

[Bug]: DataTable.FilterBar weird behavior: not visible when no filters, duplicated on filtering #16623

Description

@SalahAdDin

Package.json file

{
  "name": "@dtc/backend",
  "version": "0.0.1",
  "description": "A starter for Medusa projects.",
  "author": "Medusa (https://medusajs.com)",
  "license": "MIT",
  "keywords": [
    "sqlite",
    "postgres",
    "typescript",
    "ecommerce",
    "headless",
    "medusa"
  ],
  "scripts": {
    "build": "medusa build",
    "start": "medusa start",
    "dev": "medusa develop",
    "lint": "medusa lint",
    "test:integration:http": "TEST_TYPE=integration:http NODE_OPTIONS=--experimental-vm-modules jest --silent=false --runInBand --forceExit",
    "test:integration:modules": "TEST_TYPE=integration:modules NODE_OPTIONS=--experimental-vm-modules jest --silent=false --runInBand --forceExit",
    "test:unit": "TEST_TYPE=unit NODE_OPTIONS=--experimental-vm-modules jest --silent --runInBand --forceExit"
  },
  "dependencies": {
    "@hookform/resolvers": "5.5.7",
    "@medusajs/admin-sdk": "2.18.0",
    "@medusajs/admin-shared": "2.18.0",
    "@medusajs/caching": "2.18.0",
    "@medusajs/cli": "2.18.0",
    "@medusajs/dashboard": "2.18.0",
    "@medusajs/draft-order": "2.18.0",
    "@medusajs/framework": "2.18.0",
    "@medusajs/icons": "2.18.0",
    "@medusajs/js-sdk": "2.18.0",
    "@medusajs/medusa": "2.18.0",
    "@medusajs/ui": "4.2.0",
    "@tanstack/react-query": "5.64.2",
    "@tanstack/react-table": "8.20.5",
    "@uiw/react-json-view": "2.0.0-alpha.43",
    "@vicacha-devs/medusa-plugin-b2b": "file:../../../plugins/packages/b2b",
    "@vicacha-devs/medusa-shared-admin": "file:../../../plugins/packages/shared",
    "airport-data-js": "3.1.0",
    "react-hook-form": "7.85.0",
    "react-i18next": "13.5.0",
    "react-router-dom": "6.30.4",
    "zod": "4.2.0"
  },
  "devDependencies": {
    "@medusajs/test-utils": "2.18.0",
    "@swc/core": "^1.7.28",
    "@swc/jest": "^0.2.36",
    "@types/jest": "^29.5.13",
    "@types/node": "^20.12.11",
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.2.25",
    "jest": "^29.7.0",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2",
    "vite": "^5.4.14"
  },
  "engines": {
    "node": ">=25"
  }
}

Node.js version

v25.9.0

Database and its version

PostgreSQL 16

Operating system name and version

Deepin 25

Browser name

Firefox

What happended?

pick-sales-channel-stacked-modal.tsx

We are using DataTable to create a stacked modal, with it as a form.

We are adding the filters, and they should work correctly, but when clicking on those filters, the filter bar shows duplicated.

Expected behavior

It should work as usual, show the filter bar empty, and when using the filters, show them on the filter bar.

Actual behavior

It does not show the filter bar, and when it shows the filters, they are duplicated:

Image

We have to remove the filter bar to get it; it's only visible when filtering.
Image

Link to reproduction repo

https://github.com/Vicacha-Devs/vicacha-travels/tree/develop

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions