chrome日前升級到73，當大家都在感恩dark mode德政同時，那種一般很難發現的問題又被我們的使用者測出來了....
今天收到一個問題：
我們使用ngx-bootstrap的modal元件，並且在modal內放了一個text的input。
打開modal後，input內按下滑鼠左鍵不放，然後滑鼠移動到灰色的modal container放開。
在chrome 73.0.3683.75(目前最新版)下，modal會被自動關閉。
但是同樣的行為在前一版的chrome 72中並不會自動關閉。
最新的火狐和edge也不會自動關閉。
測試網址：https://angular-5w6npg.stackblitz.io/
chrome 72 portable下載地址：https://www.chrome64bit.com/index.php/chrome-64-bit-portable
會發現這個問題
是有人在input裡面輸入文字，想要用滑鼠把文字選取起來
但是選取的時候不小心滑到modal外面才放開
雖然其實在input內點兩下可以選取全部文字
或者選取的時候精確一點就可以避免這樣的問題
不過原因還是要找出來
用chrome開發者工具監看source的event listener來偵錯
發現ngx-bootstrap的ModalContainer元件的onClick方法被觸發，接著觸發關閉modal的程式
因此猜測問題是不是出在瀏覽器對於input的click事件的行為不一樣
寫了一個簡單的測試網頁：https://codepen.io/anon/pen/YgJQZa
在這個網頁中有一個背景藍色的div，裡面有一個input
input和div都加了click事件，觸發的話會在console中印出文字
在input內按下滑鼠左鍵不放，移動滑鼠到input外面藍色的div區域
- chrome 73：不會觸發input的click事件，會觸發div的click事件
- chrome 72：不會觸發input的click事件，不會觸發div的click事件
- firefox 66 ： 會觸發input的click事件，不會觸發div的click事件
- edge 42 ：不會觸發input的click事件，不會觸發div的click事件
結果各瀏覽器對於同樣操作行為的處理還真的不一樣
但是chrome從72到73為什麼突然就變更行為的處理方式，目前還沒找到原因
回頭測試原始的Bootstrap Modal
發現不管在上述哪個瀏覽器，用同樣的操作行為都不會導致modal被關閉
測試網址：https://codepen.io/anon/pen/wOYJMK
所以問題看起來應該是出在ngx-bootstrap裡面modal元件的click事件處理
要解決這個問題也要花點時間，只好等比較有空的時候再檢討解決方式了
