From 303b72c2d12bba44dc3def5fb3dfc1e5418a83ab Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 27 Feb 2023 22:43:04 +0800 Subject: [PATCH] Fix Fomantic UI's `touchstart` fastclick, always use `click` for click events (#23065) Using `touchstart` for `click` events is a black magic for mobile browsers (Google: `fastclick`). However, it causes many UX problems if the fastclick is used without careful design. Fomantic UI uses this fastclick for its `dimmer` and `dropdown`, it makes mobile users feel strange when they "touch" the dropdown menu. This PR uses a simple patch to fix that behavior. Then the Fomantic dropdown only uses `click` for click events. This PR is simple enough and won't cause hidden bugs even if the patch doesn't work. In the future, if there are more patches for Fomantic UI, the patches could be placed in a directory like `web_src/fomantic/patches/001-fix-click-touchstart`, etc. ![image](https://user-images.githubusercontent.com/2114189/220551915-bd28e8cc-507f-43c7-bb4a-b24f7ff3934d.png) Co-authored-by: Lunny Xiao --- Makefile | 2 ++ web_src/fomantic/build/semantic.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/Makefile b/Makefile index 3a590559d1d1a..19cd455aba30c 100644 --- a/Makefile +++ b/Makefile @@ -859,6 +859,8 @@ fomantic: cp -f $(FOMANTIC_WORK_DIR)/theme.config.less $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui/src/theme.config cp -rf $(FOMANTIC_WORK_DIR)/_site $(FOMANTIC_WORK_DIR)/node_modules/fomantic-ui/src/ cd $(FOMANTIC_WORK_DIR) && npx gulp -f node_modules/fomantic-ui/gulpfile.js build + # fomantic uses "touchstart" as click event for some browsers, it's not ideal, so we force fomantic to always use "click" as click event + $(SED_INPLACE) -e 's/clickEvent[ \t]*=/clickEvent = "click", unstableClickEvent =/g' $(FOMANTIC_WORK_DIR)/build/semantic.js $(SED_INPLACE) -e 's/\r//g' $(FOMANTIC_WORK_DIR)/build/semantic.css $(FOMANTIC_WORK_DIR)/build/semantic.js rm -f $(FOMANTIC_WORK_DIR)/build/*.min.* diff --git a/web_src/fomantic/build/semantic.js b/web_src/fomantic/build/semantic.js index 77c82ca6fdcd2..6304c6faf49e4 100644 --- a/web_src/fomantic/build/semantic.js +++ b/web_src/fomantic/build/semantic.js @@ -2118,7 +2118,7 @@ $.fn.dimmer = function(parameters) { moduleNamespace = 'module-' + namespace, moduleSelector = $allModules.selector || '', - clickEvent = ('ontouchstart' in document.documentElement) + clickEvent = "click", unstableClickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', @@ -2850,7 +2850,7 @@ $.fn.dropdown = function(parameters) { moduleSelector = $allModules.selector || '', hasTouch = ('ontouchstart' in document.documentElement), - clickEvent = hasTouch + clickEvent = "click", unstableClickEvent = hasTouch ? 'touchstart' : 'click',