fix(Hint,Tooltip,Tab): process children with imperative handles correctly

[lossir]

Проблема

Использование хука useImperativeHandle может развалить приложение.
Обнаружил во время ревью фикса другой проблемы связанной с getRootNode #2930 (comment)

Там компонент FileUploader начал валиться с такой ошибкой:

Error: Argument appears to not be a ReactComponent. Keys: focus,blur,reset
    at findHostInstanceWithWarning
-   at findDOMNode
    ...

Она возникает здесь:

retail-ui/packages/react-ui/lib/rootNode/getRootNode.ts

Line 55 in 60bb19c

rootNode = findDOMNode(instance);

А причина тут:

retail-ui/packages/react-ui/components/FileUploader/FileUploader.tsx

Line 179 in 60bb19c

useImperativeHandle(ref, () => ({ focus, blur, reset }), [ref]);

findDOMNode пытается вытащить ноду из простого объекта и разваливается.

Т.е. если пользователь также будет использовать в своём компоненте хук useImperativeHandle и обернёт его, например, в Тултип, то его приложение развалится.

Решение

try/catch

В качестве фикса я использовал try/catch которые позволяет приложению просто не крашиться.
Текст ошибки в консоле содержит ссылку на workaround

-[getRootNode]: using findDOMNode threw an exception
-See https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/README.md#strictmode

Тултип и ему подобные контролы всё равно не будут работать, т.к. не смогут достать дом-ноду.

пример 1

Но можно немного доработать объект возвращаемый в useImperativeHandle, и всё заведётся.

const coolRef = useRef<any>();
useImperativeHandle(ref, () => ({
  ...
  getRootNode: () => coolRef.current
}));
return <span ref={coolRef} />;

пример 2

Можно ещё просто обернуть пользовательский контрол в useImperativeHandle в span/div и тогда findDOMNode нормально отработает.

Ссылки

Воспроизведение бага можно посмотреть в песочнице. Там же реализован workaround:
https://codesandbox.io/s/getrootnode-useimperativehandle-workaround-qrklrd?file=/src/App.tsx

По тестам Реакта видно, что findDOMNode так и должен себя вести:
https://github.com/facebook/react/blob/main/packages/react-dom/src/__tests__/findDOMNode-test.js#L66-L70

IF-577

Чек-лист перед запросом ревью

1. Добавлены тесты на все изменения
   ✅ unit-тесты для логики
   ⬜ скриншоты для верстки и кросс-браузерности
   ⬜ нерелевантно

2. Добавлена (обновлена) документация
   ⬜ styleguidist для пропов и примеров использования компонентов
   ⬜ jsdoc для утилит и хелперов
   ✅ комментарии для неочевидных мест в коде
   ✅ прочие инструкции (README.md, contributing.md и др.)
   ⬜ нерелевантно

3. Изменения корректно типизированы
   ✅ без использования any (см. PR 2856)
   ⬜ нерелевантно

4. Прочее
   ✅ все тесты и линтеры на CI проходят
   ✅ в коде нет лишних изменений
   ✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

[JackUait]

Да, похоже, что с классовыми компонентами (на нашей стороне) можно предложить только обходное решение. С функциональными компонентами в теории можно было бы попробовать использовать способ, который мы использовали в withClassWrapper

[zhzz]

@lossir @JackUait не могу перезапросить вашего ревью. ПР готов, прошу глянуть.

[lossir]

👍