Несовместимый фокус () с React в Safari / Chrome / Firefox

Question

Несовместимый фокус () с React в Safari / Chrome / Firefox

0

Недавно я столкнулся с проблемой в React при кросс-браузерном тестировании. Проблема возникает при вызове focus() для элемента, содержащего автоматически генерируемые теги <span>.

Упрощенный компонент

Мой компонент, <Button/>, является абстракцией нормальной <button> с дополнительными функциями. Вот упрощенная версия:

Вывод:

<Button value="Button"/>

является:

<button><span>Button</span></button>

Из-за того, что React автоматически обертывает плавающие текстовые узлы в промежутке, поэтому он может назначать data-reactid, текст внутри <button> заключен в теги <span>.

Кнопка имеет метод onClick() для вызова event.target.focus() элемента.

Проблема

В Chrome/Firefox нажатие кнопки устанавливает фокус на кнопку. В Safari нажатие кнопки не всегда устанавливает фокус на кнопку. Вместо этого <body> получает фокус.

После нескольких часов вождения я обнаружил, что кнопка получает фокус только при нажатии за пределами автоматически генерируемых тегов <span> (синие области кнопки ниже). Щелчок в тегах <span> созданных React (черные области кнопки ниже), заставит <body> получить фокус.

Опять же, это происходит только в Safari.

В Chrome/Firefox нажатие любой из областей приводит к тому, что <button> получает фокус.

Здесь CodePen, содержащий полный пример, шаги для воспроизведения:

Откройте CodePen в Safari.
Откройте консоль.
Нажмите кнопку в пределах темной области (соответствующей тегу <span>). Вы заметите, что focused элемент (с использованием document.activeElement), скорее всего, является <body>.
Нажмите кнопку в синей области (соответствующая тегу <button>. Вы заметите, что focused элементом является <button>.

Вопрос

Есть ли предпочтительный метод для согласования поведения между браузерами? Или это не связано с React и просто разница в том, как Safari/Chrome/Firefox обрабатывают focus()?

Одно из возможных решений: set pointer-events: none; на внутреннем элементе <span>. Это позволит кликам на <span> распространяться до <button>. Однако это кажется хакером.

Brett DeWoody 27 апр. 2016, в 01:12

Источник

Теги:

javascript

reactjs

google-chrome

safari

1 ответ

Ещё вопросы

John Ruddell · Accepted Answer · 2016-04-27T03-12-00.000Z

2

Лучший ответ

Можете ли вы просто использовать ссылку?

ака

something(event){
    this.refs.button.focus()
}
render(){
    // stuff
    return (
        <button ref="button" onClick={this.something}>
            {some text here that will make a span element around it}
        </button>
    );
}

образец скрипки

John Ruddell 27 апр. 2016, в 03:12

0

Это решает часть проблемы - нажатие кнопки <span> приводит к фокусировке <button> . Однако, если я нажимаю <button> затем перемещаюсь по <span> это вызывает некоторую нестабильность CSS. Мне нужно оставить pointer-events: none к сожалению. Тем не менее, это решает проблему.
Brett DeWoody 27 апр. 2016, в 02:22
0

@BrettDeWoody Можете ли вы определить CSS-выигрыш? что-то вы пытаетесь сделать с помощью css на кнопке?
John Ruddell 27 апр. 2016, в 02:24
0

У меня есть несколько изменений цвета / перехода для различных состояний, определенных в CSS. Похоже, что метод onMouseOut() срабатывает при переходе от <button> к <span> и наоборот, только в Safari.
Brett DeWoody 27 апр. 2016, в 02:35
0

Хорошо, так что все, что вам нужно сделать, это применить к любому классу или стилю, который вы применяете, сделать это для span также в css.
John Ruddell 27 апр. 2016, в 02:41
0

Проблема в том, что при переходе от <button> к <span> <button> теряет фокус и вызывает проблемы с CSS. Как вы думаете, это проблема React или проблема Safari?
Brett DeWoody 27 апр. 2016, в 02:45
0

не следуя Я не знаю, что такое стиль, и я не знаю, что вы делаете, поэтому очень трудно помочь. это звучит как проблема браузера. Вы используете JavaScript для назначения стилей? или css через имя класса?
John Ruddell 27 апр. 2016, в 02:48
0

Я изменил цвета на Codepen, чтобы сделать его более очевидным - s.codepen.io/brettdewoody/debug/RaYeJp . Нажатие на черный <span> (в Safari) не установит фокус на кнопке. Если щелкнуть синюю <button> а затем перейти в черный <span> , кнопка потеряет фокус.
Brett DeWoody 27 апр. 2016, в 03:12
0

Я до сих пор не знаю, какими должны быть эти цвета. Мне нужно увидеть код. Вы, вероятно, просто не учитываете интервал при смене цвета
John Ruddell 27 апр. 2016, в 03:14
0

Ах, я думал, что вы можете получить к нему по ссылке - codepen.io/brettdewoody/pen/RaYeJp
Brett DeWoody 27 апр. 2016, в 03:14
0

Черный цвет предназначен только для презентации, поэтому вы можете видеть, где находится <span> .
Brett DeWoody 27 апр. 2016, в 03:16
0

нажатие на черный промежуток в сафари работает для меня, когда я использую фокус
John Ruddell 27 апр. 2016, в 03:29
0

почему ты просто не наведешь указатель мыши?
John Ruddell 27 апр. 2016, в 03:32

Показать ещё 10 комментариев