Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Hint or Tooltip with trigger='hover' over ComboBox/Select #1177

Merged
merged 16 commits into from
Feb 23, 2019
Merged

Conversation

k-g-a
Copy link
Contributor

@k-g-a k-g-a commented Feb 19, 2019

Fixes #898, fixes #646.

Суть фикса: в случае использования React.createPortal (react@^16) дети поратла ведут себя так, словно являются дочерними элементами своего родителя (хотя по факту это не так - они выносятся в body), и react'овские события mouseEnter/mouseLeave не вызываются; решение заключается в том, чтобы использовать честные события браузера.

Что сделано:

  • логика по оборачиванию во wrapper (если передали текст, либо если useWrapper=true) перенесена из Hint/Tooltip в Popup;
  • из всех мест убраны обработчики событий react'а, вместо этого обработчики навешиваются на anchorElement в одном месте (updateAnchorElement()) через addEventListener(); focus/blur заменены на focusin/focusout (т.к. react'овские focus/blur, в отличие от настоящих, умели всплывать);
  • обработчики событий удаляются с anchorElement на componentWillUnmount();
  • getProps() Tooltip'а больше не возвращает wrapperProps (за ненадобностью);
  • для Popup добавлена storу 'Hover behaviour', где можно посмотреть все состояния.

Сайд эффекты:

  • добавил opaque-helper-types.d.ts и положил туда IMouseEvent, IFocusEvent, IFocusInEvent, IBlurEvent: в них используется declare + dynamic type import, чтобы их не нужно было импортировать при использовании (собственно, opaque);
  • в Tooltip'е пропал this.refWrapper за ненадобностью, вместе с ним - forceUpdate() в componentDidMonut(); для проверки работоспособности появилась Tooltip story 'ManualTooltip';
  • в CustomComboBox в handleInputBlur() проверка this.state.opened заменена на this.state.editing - решили с @wKich , что так правильнее; с проверкой opened не вызывался blur(), если меню ComboBox'а не открыто;
  • unit-тест на открытие по фокусу удален: он опирался на simulate('focus'), который на самом деле ничего не симулировал, а просто вызывал prop onFocus (на самом деле, он не проходил бы с useWrapper=false); вместо него добавлен скриншотный тест; скриншотный тест заигнорен в FF, т.к. мы используем 47-ую версию, а поддержку focusin/focusout завезли только с 52-ой;
  • unit-тест на ComboBox переписан так, чтобы blur был честным (без simulate); у ComboBox появился публичный метод blur().
  • snapshot'ные тесты - один :) - стали чуть стабильнее: rt_RootId и react-root-container-id теперь всегда равны 1, вне зависимости от того, в какой последовательности и какие тесты гоняются; раньше они портились, если сделать ---updateSnapshot с конкретным упавшим тестом.

@k-g-a k-g-a requested review from wKich and zhzz and removed request for wKich February 19, 2019 15:10
wKich
wKich previously approved these changes Feb 21, 2019
@wKich wKich merged commit 0cbc61a into master Feb 23, 2019
@wKich wKich deleted the fix-898-646 branch February 23, 2019 10:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment