From abf8f749348489d23f1b7916c6427f95e0f6f145 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 717d7cafc660b..8bfc7ddcaff8b 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',