davidtheclark/react-aria-tabpanel

Tab is not working as expected in safari

Open

#20 ouverte le 4 oct. 2017

Voir sur GitHub
 (1 commentaire) (0 réactions) (0 assignés)JavaScript (28 forks)github user discovery
help wanted

Métriques du dépôt

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

Description

Hello I encounter an issue with safari when the tag is button.

I used the latest version of react-aria-tabpanel

This is a working example on safari example :

const tablink = (content, { isActive }) => (
  <span className={interactivityClasses({
    styles,
    isActive,
    isInactive: !isActive,
    baseClass: 'navLink' })}>
    {content}
  </span>
);

Tab element inside a Wrapper and Tablist

<Tab
                  id={`tabId${index}`}
                  title={tab.title}
                  name={`tabId${index}`}
                  type={'button'}
                  className={styles.navButton}
                  letterNavigationText={tab.locale}
                  tag={'div'}>
                  {tablink.bind(null, tab.locale.toUpperCase())}
                </Tab>

Version who doesn't work

<Tab
                  id={`tabId${index}`}
                  title={tab.title}
                  name={`tabId${index}`}
                  type={'button'}
                  className={styles.navButton}
                  letterNavigationText={tab.locale}
                  tag={'button'}>
                  {tablink.bind(null, tab.locale.toUpperCase())}
                </Tab>

If I add the tag BUTTON the click listener doesn't fire

Guide contributeur