davidtheclark/react-aria-tabpanel

Tab is not working as expected in safari

Open

#20 aberto em 4 de out. de 2017

Ver no GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (28 forks)github user discovery
help wanted

Métricas do repositório

Stars
 (121 stars)
Métricas de merge de PR
 (Métricas PR pendentes)

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

Guia do colaborador