[Tooltip, Hint и другие Popup] Добавить возможность прерывать показ верхнего Popup при показе внутреннего IF-1024

[MozalovPavel]

Предисловие.
Описанная ниже проблема относится к любым компонентам реализованным на основе Popup (например, Tooltip, Hint и др.), далее буду называть эти компоненты абстрактно Popup.

Описание проблемы.
Кейс: оборачиваем в Popup что-то, что содержит другой Popup.

Проблема: сейчас получается, что при наведении на самый глубокий элемент, обернутый в Popup, мы покажем все Popup-ы.
Пример из жизни:

Что хочется: хочется научиться говорить Popup-у, что он должен учитывать показ всех своих возможных вложенных Popup-ов общим механизмом и не показывать верхние Popup-ы при показе более глубоких.

Возможное решение:

• добавить пропс в Popup компоненты, по которому можем включать обработку этого случая;
• с помощью React Context хранить и понимать, что есть вложенные открытые Popup-ы и не позволять открывать верхние Popup-ы при открытых вложенных.

[lossir]

Привет. Можешь подготовить пример в какой-нибудь песочнице?
Сейчас мне сложно представить, зачем нужна всплывашка внутри всплывашки. Стоит пригласить проектировщика @dzekh.
Вероятно, вопрос можно решить немного изменив вёрстку макета.

Но если это тултипы, то можно сделать что-то такое - codesandbox.io/s/popup-inside-popup

[MozalovPavel]

Привет.

Вот пример в песочнице - https://codesandbox.io/s/popup-inside-popup-wkr6u?file=/src/App.tsx

Есть кейс в проекте, когда у нас в тултип вкладывается хинт точно также как и в примере в песочнице: есть абстрактный компонент, который внутри весь контент обернул в тултип, а в children принимает что угодно, в том числе иможет принять и хинт. В данном случае нам не подходит предложенное решение через ручное управление тултипами.

[lossir]

Думаю, законным выглядит случай, если среди Хинтов и Тултипов (открывающихся по ховеру) показывался бы только один из них. Но они должны быть в неком едином скоупе, и не влиять на Хинты и Тултипы в других скоупах.

О реализации можно будет подумать если согласуем поведение. Позову @zhzz для обсуждения.

[zhzz]

Да, думаю это будет полезно. Еще один пример из будущего это валидация всего контрола и отдельно его составляющих, например, токенов в токен-инпуте, или файлов в файл-аплоадере.