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.

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

added event listener to prevent the dot being created when right clicked (8981) #9014

Closed
wants to merge 1 commit into from

Conversation

Paarth-Kashyap
Copy link

@Paarth-Kashyap Paarth-Kashyap commented Dec 10, 2024

Addresses Issue #8981

This PR removes the grey dot or focus ring that appears on the dropdown when right-clicking.

Changes Made:
CSS Update:

Added &:focus, &:active { outline: none; box-shadow: none; } to the StyledContainerActionMenuDropdown component to prevent focus and active state visual effects.
Event Handler:

Added an onMouseDown event with event.preventDefault() to stop the default focus behavior when interacting with the dropdown.

Copy link
Contributor

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against 8c06c2e

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

Added CSS rules and event handler to prevent focus ring from appearing when right-clicking dropdown menus in the action menu component.

  • Added outline: none and box-shadow: none CSS rules to StyledContainerActionMenuDropdown in /packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
  • Implemented handleMouseDown event handler with event.preventDefault() to prevent default focus behavior
  • Updated ts-node dev dependency from 10.9.1 to ^10.9.2 in package.json

💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!

2 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile

Comment on lines +38 to +44
/* Remove focus/active visual effects */
outline: none;
&:focus,
&:active {
outline: none;
box-shadow: none;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: CSS outline:none can impact accessibility for keyboard users. Consider keeping focus styles for keyboard navigation while only preventing them for mouse interactions.

@lucasbordeau
Copy link
Contributor

lucasbordeau commented Dec 27, 2024

@Paarth-Kashyap Thank you for your contribution, I'm closing this PR as for now we need to first fix the context menu which is broken. We'll update you when the context menu is fixed so you can proceed with a new PR.

Also 2 things about your PR :

  • I updated the issue to point out that the solution should be with border not focus.
  • Please do not post update on yarn for a package that is not related to the issue.

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

Successfully merging this pull request may close these issues.

4 participants