Ситуация:
При разработке админ-панели для проекта я решил использовать новый для меня инструмент - FilamentPHP (библиотека для создания админ-панелей). В форме редактирования пользователя есть поле для заполнения номера телефона.
В документации я нашел фишку, позволяющую настроить маску для него одной строкой кода, например,
+7 (999) 999-99-99. В процессе перепроверки функционала выяснилось, что она работает крайне странно:
• Чтобы она сработала, нужно снять фокус с поля, кликнуть на него и снова снять фокус.
• Иногда и это не помогает, нужно сделать так несколько раз.
• И пару раз она работала как надо, подставив плюс, семерку и другие символы прямо в процессе заполнения.
Я думал, что где-то ошибся, так как на сайте JavaScript библиотеки, которая используется, в демо-примере все отлично работает.
DEMO
Как я обычно делаю:
Чтобы разобраться с багом, я иду от самой проблемы вглубь кода, при этом часто добираюсь до исходников фреймворка или даже самой библиотеки, которая используется во фреймворке.
Со временем я начал использовать для этого дебаггеры, что немного упростило процесс. Но несмотря на все это, он всегда отнимает много времени.
Как я сделал в этот раз:
Я немного отвлекся, держа в уме проблему, и додумался заглянуть в репозиторий библиотеки FilamentPHP. Там я среди открытых issues (вопросов, проблем, багов) вбил в поиск слово
mask, и "О, чудо-чудное!" - разобрался с масками. Оказывается, проблема есть только в Firefox и, вероятно, связана с интеграцией в Livewire, на котором основан FilamentPHP, и способом подключения масок или AlpineJS внутри самого Filament.
Источник (Там даже есть предложения решения проблемы)
Выводы:
Наконец я начал понимать порядок действий, как искать проблему, вместо того, чтобы копаться в исходниках библиотек 😄. В принципе, и без этого я разбирался, но это могло занять прилично времени, которое в большинстве случаев приходится исключать из отчетов по работе. Но на сроки это все равно всегда отражается...