adobe/react-spectrum

Tabs component, trigger onSelectionChange on hover

Open

#5 611 ouverte le 20 déc. 2023

Voir sur GitHub
 (5 commentaires) (1 réaction) (0 assignés)TypeScript (1 500 forks)auto 404
bughelp wanted

Métriques du dépôt

Stars
 (15 634 stars)
Métriques de merge PR
 (Métriques PR en attente)

Description

Provide a general summary of the issue here

This is the component i'm using:

<Tabs onSelectionChange={(key) => {
			alert(key);
		}}>
  <TabList aria-label="Input settings">
    <Tab id="mouse">Mouse Settings</Tab>
    <Tab id="keyboard">Keyboard Settings</Tab>
  </TabList>
  <TabPanel id="mouse">Mouse Settings</TabPanel>
  <TabPanel id="keyboard">Keyboard Settings</TabPanel>
</Tabs>

The problem is the alert is appearing every time i hover the selected tab

🤔 Expected Behavior?

onSelectionChange should be triggered only on change, not on hover

😯 Current Behavior

onSelectionChange triggers also on hover on current tab (it looks only while the tab is focused)

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/epic-bogdan-sjd6ky

Version

"react-aria-components": "^1.0.0",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Guide contributeur

Direction de recherche
Inspectez le gestionnaire onSelectionChange du composant Tabs pour vous assurer qu'il se déclenche uniquement lorsque la séchange réellement, et non lors du survol de l'onglet actuellement sélectionné. Le problème semble être que le survol provoque un changement de focus qui déclenche onSelectionChange. Recherchez les gestionnaires d'événements comme onHover ou onFocus qui pourraient appeler le rappel de manière incorrecte.
Stack technique
typescriptreact
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ReactJavaScript
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
75