adobe/react-spectrum

Tabs component, trigger onSelectionChange on hover

Open

#5611 aperta il 20 dic 2023

Vedi su GitHub
 (5 commenti) (1 reazione) (0 assegnatari)TypeScript (1500 fork)auto 404
bughelp wanted

Metriche repository

Star
 (15.634 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

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

Guida contributor

Direzione di ricerca
Ispeziona il gestore onSelectionChange del componente Tabs per assicurarti che venga attivato solo quando la selezione cambia effettivamente, non quando si passa con il mouse sopra la scheda attualmente selezionata. Il problema sembra essere che il passaggio del mouse provoca un cambiamento di focus che attiva onSelectionChange. Cerca gestori di eventi come onHover o onFocus che potrebbero chiamare erroneamente il callback.
Tech stack
typescriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
ReactJavaScript
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
75