Fixing the after click issue of the filter and modifications

[Joel-Joseph-George]

#282

Summary by CodeRabbit

• New Features

  • MultiSelectFilter component now supports custom styling through optional props for trigger and popover content customization.

• Style

  • Enhanced filter popover sizing and visual refinements across filter components.
  • Optimized table row navigation response behavior.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

MultiSelectFilter component gains three optional props—onOpenChange, className, and contentClassName—enabling downstream components to hook popover state changes and customize styling. The internal styling is refactored with cn utility for cleaner class composition. UserHomePage integrates the new callback to throttle row navigation within 300 milliseconds of any filter dropdown close, preventing accidental table clicks immediately after filter interaction.

Changes

MultiSelectFilter Component Enhancement and Navigation Throttle

Layer / File(s)	Summary
MultiSelectFilter API enhancement src/components/MultiSelectFilter.tsx	MultiSelectFilterProps extended with optional onOpenChange, className, and contentClassName props. New handleOpenChange wrapper synchronizes local popover open state with the optional callback.
MultiSelectFilter UI refactoring and popover wiring src/components/MultiSelectFilter.tsx	Popover rendering updated to use open={open} and onOpenChange={handleOpenChange}. clearAll now closes the popover via callback. Styling refactored with cn utility for conditional class composition, with overrides applied to trigger, content, container, and option elements. Popover sizing uses measured trigger width for minWidth.
Navigation throttle with filter interaction src/features/dashboard/user/UserHomePage.tsx	lastCloseTime ref added to track filter close timestamps. handleRowClick early-returns if row click occurs within 300ms of last filter close. Book and Status filter components wired with onOpenChange handlers to update lastCloseTime when each dropdown closes.

Sequence Diagram

sequenceDiagram
  participant User
  participant MultiSelectFilter
  participant UserHomePage
  User->>MultiSelectFilter: Click filter dropdown
  MultiSelectFilter->>MultiSelectFilter: Update open state
  MultiSelectFilter->>UserHomePage: onOpenChange(false)
  UserHomePage->>UserHomePage: Set lastCloseTime to now
  User->>UserHomePage: Click table row quickly
  UserHomePage->>UserHomePage: Check elapsed time since lastCloseTime
  Note over UserHomePage: If elapsed < 300ms, ignore click
  User->>UserHomePage: Click table row after 300ms
  UserHomePage->>UserHomePage: Navigate row (throttle passed)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A filter that talks and a throttle so neat,
Close it, wait thirty, then navigate with feet.
With className and callback, the component does shine,
Popover and timing in perfect design. ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title 'Fixing the after click issue of the filter and modifications' is vague and generic, using non-descriptive terms like 'modifications' that don't convey the specific technical changes made.	Revise the title to be more specific and descriptive, e.g., 'Add onOpenChange callback and styling props to MultiSelectFilter' or 'Throttle row navigation to prevent rapid consecutive clicks after filter interactions'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/translator-filter-books

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}