davidtheclark/react-aria-tabpanel

Tab is not working as expected in safari

Open

#20 创建于 2017年10月4日

在 GitHub 查看
 (1 评论) (0 反应) (0 负责人)JavaScript (28 fork)github user discovery
help wanted

仓库指标

Star
 (121 star)
PR 合并指标
 (PR 指标待抓取)

描述

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

贡献者指南