davidtheclark/react-aria-tabpanel

Tab is not working as expected in safari

Open

#20 aperta il 4 ott 2017

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)JavaScript (28 fork)github user discovery
help wanted

Metriche repository

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

Descrizione

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

Guida contributor