From bf38469696895b24dd797813e8429346b5c93694 Mon Sep 17 00:00:00 2001
From: Prasiddha-n <prasiddha.neupane@resimator.fi>
Date: Thu, 13 Jun 2024 22:50:02 +0545
Subject: [PATCH] FIX - Double-tap on select/multi-select inputs on mobile
 triggers unwanted tooltip #6103

---
 .../core/src/components/Input/Input.tsx       | 66 +++++++++++--------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/packages/@mantine/core/src/components/Input/Input.tsx b/packages/@mantine/core/src/components/Input/Input.tsx
index 4a6efc5c139..0a178f9ed7f 100644
--- a/packages/@mantine/core/src/components/Input/Input.tsx
+++ b/packages/@mantine/core/src/components/Input/Input.tsx
@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
 import {
   Box,
   BoxProps,
@@ -38,16 +40,16 @@ export type InputStylesNames = 'input' | 'wrapper' | 'section';
 export type InputVariant = 'default' | 'filled' | 'unstyled';
 export type InputCssVariables = {
   wrapper:
-    | '--input-height'
-    | '--input-fz'
-    | '--input-radius'
-    | '--input-left-section-width'
-    | '--input-right-section-width'
-    | '--input-left-section-pointer-events'
-    | '--input-right-section-pointer-events'
-    | '--input-padding-y'
-    | '--input-margin-top'
-    | '--input-margin-bottom';
+  | '--input-height'
+  | '--input-fz'
+  | '--input-radius'
+  | '--input-left-section-width'
+  | '--input-right-section-width'
+  | '--input-left-section-pointer-events'
+  | '--input-right-section-pointer-events'
+  | '--input-padding-y'
+  | '--input-margin-top'
+  | '--input-margin-bottom';
 };
 
 export interface InputStylesCtx {
@@ -206,6 +208,9 @@ export const Input = polymorphicFactory<InputFactory>((_props, ref) => {
   const ctx = useInputWrapperContext();
   const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };
 
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputMergedRef = useMergeRefs([ref, inputRef]);
+
   const getStyles = useStyles<InputFactory>({
     name: ['Input', __staticSelector],
     props: __stylesApiProps || props,
@@ -223,12 +228,12 @@ export const Input = polymorphicFactory<InputFactory>((_props, ref) => {
 
   const ariaAttributes = withAria
     ? {
-        required,
-        disabled,
-        'aria-invalid': !!error,
-        'aria-describedby': ctx?.describedBy,
-        id: ctx?.inputId || id,
-      }
+      required,
+      disabled,
+      'aria-invalid': !!error,
+      'aria-describedby': ctx?.describedBy,
+      id: ctx?.inputId || id,
+    }
     : {};
 
   return (
@@ -263,17 +268,24 @@ export const Input = polymorphicFactory<InputFactory>((_props, ref) => {
         </div>
       )}
 
-      <Box
-        component="input"
-        {...rest}
-        {...ariaAttributes}
-        ref={ref}
-        required={required}
-        mod={{ disabled, error: !!error && withErrorStyles }}
-        variant={variant}
-        __size={inputSize}
-        {...getStyles('input')}
-      />
+      <Box onClick={() => {
+        if (!inputRef?.current?.readOnly) return;
+        inputRef?.current?.focus();
+      }}>
+        <Box
+          component="input"
+          {...rest}
+          {...ariaAttributes}
+          ref={inputMergedRef}
+          required={required}
+          mod={{ disabled, error: !!error && withErrorStyles }}
+          variant={variant}
+          __size={inputSize}
+          {...getStyles('input', {
+            style: { pointerEvents: inputRef?.current?.readOnly ? 'none' : 'auto' },
+          })}
+        />
+      </Box>
 
       {rightSection && (
         <div