From 911624f7c9a411ae57d417f5e81f13a4a671a4a0 Mon Sep 17 00:00:00 2001
From: "Mr.Dr.Professor Patrick" <alaev89@yandex-team.ru>
Date: Thu, 2 May 2024 13:50:36 +0200
Subject: [PATCH] fix(TextInput): fix `handleAdditionalContentClick` handler
 (#1558)

---
 .../controls/TextInput/TextInput.tsx          |  6 ++--
 .../__tests__/AdditionalContent.test.tsx      | 32 +++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/components/controls/TextInput/__tests__/AdditionalContent.test.tsx

diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx
index 6c4e189525..6a44f74c36 100644
--- a/src/components/controls/TextInput/TextInput.tsx
+++ b/src/components/controls/TextInput/TextInput.tsx
@@ -176,10 +176,12 @@ export const TextInput = React.forwardRef<HTMLSpanElement, TextInputProps>(
         };
 
         const handleAdditionalContentClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
-            const hasActiveElement = event.currentTarget.contains(document.activeElement);
+            const needActivateInput =
+                !event.currentTarget.contains(document.activeElement) &&
+                event.currentTarget.contains(event.target as HTMLElement);
             const hasSelection = Boolean(document.getSelection()?.toString());
 
-            if (!hasActiveElement && !hasSelection) {
+            if (needActivateInput && !hasSelection) {
                 innerControlRef.current?.focus();
             }
         };
diff --git a/src/components/controls/TextInput/__tests__/AdditionalContent.test.tsx b/src/components/controls/TextInput/__tests__/AdditionalContent.test.tsx
new file mode 100644
index 0000000000..84c1c9d3cb
--- /dev/null
+++ b/src/components/controls/TextInput/__tests__/AdditionalContent.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import userEvent from '@testing-library/user-event';
+
+import {render, screen} from '../../../../../test-utils/utils';
+import {Button} from '../../../Button';
+import {Sheet} from '../../../Sheet';
+import {TextInput} from '../TextInput';
+
+const TextInputWithButtonAndSheet = () => {
+    const [open, setOpen] = React.useState(false);
+    const startContent = (
+        <React.Fragment>
+            <Button onClick={() => setOpen(true)}>Open</Button>
+            <Sheet visible={open}>Sheet content</Sheet>
+        </React.Fragment>
+    );
+    return <TextInput startContent={startContent} />;
+};
+
+describe('TextInput additional content', () => {
+    test('TextInput should not be focused', async () => {
+        render(<TextInputWithButtonAndSheet />);
+        const user = userEvent.setup();
+        const button = await screen.findByText('Open');
+        await user.click(button);
+        const sheetContent = await screen.findByText('Sheet content');
+        await user.click(sheetContent);
+        const input = screen.getByRole('textbox');
+        expect(input).not.toHaveFocus();
+    });
+});