[Autocomplete] Listen for click on the root element #36369

sai6855 · 2023-02-28T11:53:06Z

closes #36364

preview: https://deploy-preview-36369--material-ui.netlify.app/joy-ui/react-autocomplete/

joy UI working video

screen-recording-2023-03-04-at-42306-pm_yYbkTH3w.mov

material ui Working video

https://www.loom.com/share/5386e85fa34049b2b481e44abfdade42

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2023-02-28T11:55:52Z

Netlify deploy preview

https://deploy-preview-36369--material-ui.netlify.app/

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 85125ce

marcpachecog · 2023-03-01T14:38:33Z

@sai6855 Your changes have introduced another bug:

Grabacion.de.pantalla.2023-03-01.a.las.15.37.01.mov

sai6855 · 2023-03-01T14:43:43Z

@sai6855 Your changes have introduced another bug:

Nice catch, I'll check

sai6855 · 2023-03-04T10:59:11Z

@sai6855 Your changes have introduced another bug:

@marcpachecog Fixed the bug you found out and i've updated PR description with new video.

@siriwatknp @ZeeshanTamboli PR is ready for review now

packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx

siriwatknp · 2023-03-11T08:06:35Z

packages/mui-base/src/useAutocomplete/useAutocomplete.js

+    if (event.currentTarget === event.target) {
+      handleInputMouseDown();
+    }


I think it should also focus on the input as well, otherwise I can't close the popup on blur in this case. I mouse down on the border and then mouse up on one of the options, after that I cannot close the popup when click outside of the autocomplete.

Screen.Recording.2566-03-11.at.15.03.18.mov

@siriwatknp moved all logic to onClick, now bug you found is fixed.

oliviertassinari · 2023-03-15T19:07:35Z

packages/mui-base/src/useAutocomplete/useAutocomplete.js

    }
  };

  // Focus the input when interacting with the combobox
-  const handleClick = () => {
+  const handleClick = (event) => {
    inputRef.current.focus();


To see if it makes sense to use this bug as an opportunity to fix this line. Focusing on click no sense per #29381 (comment)

@oliviertassinari i had changed logic, since previous logic wasn't working for material-ui Autocomplete. With updated logic, i don't know if the your proposed fix is relevant to fix in this PR.

sai6855 · 2023-03-17T12:35:12Z

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

+          handleRootOnClick(event);
+        }
+        if (event.currentTarget === event.target && handleInputMouseDown) {
+          handleInputMouseDown(event as React.MouseEvent<HTMLInputElement, MouseEvent>);


handleInputMouseDown expects event to be coming from input but here we have access to event of div element. that's why had to cast the type

sai6855 · 2023-03-18T13:27:40Z

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

@@ -439,6 +441,16 @@ const Autocomplete = React.forwardRef(function Autocomplete(
    externalForwardedProps: other,
    ownerState,
    getSlotProps: getRootProps,
+    additionalProps: {
+      onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {


this onClick overrides onClick from https://github.com/mui/material-ui/blob/master/packages/mui-base/src/useAutocomplete/useAutocomplete.js#L1084 , hence onClick coming from useAutoComplete is called again here.

sai6855 · 2023-03-18T13:30:48Z

packages/mui-material/src/Autocomplete/Autocomplete.js

@@ -571,6 +573,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
            ref: setAnchorEl,
            className: classes.inputRoot,
            startAdornment,
+            onClick: (event) => {
+              if (event.target === event.currentTarget) {


Check to make sure, handleInputMouseDown is called only when user clicks on input element.

sai6855 · 2023-03-18T13:31:14Z

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

+        if (handleRootOnClick) {
+          handleRootOnClick(event);
+        }
+        if (event.currentTarget === event.target && handleInputMouseDown) {


Check to make sure, handleInputMouseDown is called only when user clicks on input element.

siriwatknp

👍 Thanks for the fix!

mnajdova · 2023-03-21T10:12:57Z

packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx

@@ -766,6 +766,15 @@ describe('Joy <Autocomplete />', () => {
      });
    });

+    it('should open popup when clicked on borders of input element', () => {


I don't think the description matches what you are testing. It should be : 'should open popup when clicked on the root element'.

@mnajdova updated in this commit 85125ce

mnajdova · 2023-03-21T10:14:22Z

packages/mui-material/src/Autocomplete/Autocomplete.test.js

@@ -967,6 +967,23 @@ describe('<Autocomplete />', () => {
      });
    });

+    it('should open popup when clicked on borders of input element', () => {


Same as above.

updated in this commit 85125ce

[Autocomplete] Listen for click on border

27037f1

sai6855 marked this pull request as draft February 28, 2023 11:53

sai6855 added 4 commits February 28, 2023 16:35

test

f20f2b3

added logs

6ed186a

removed logs

a7745a6

added tests

e09599e

sai6855 marked this pull request as ready for review March 1, 2023 04:01

sai6855 added 2 commits March 1, 2023 04:03

name change

93b9b41

removed extra code

24fbd25

sai6855 mentioned this pull request Mar 1, 2023

[Joy] Autocomplete not opening when clicking in the borders #36364

Closed

2 tasks

used classes.root

b87892e

zannager added the component: autocomplete This is the name of the generic UI component, not the React module! label Mar 1, 2023

zannager requested a review from siriwatknp March 1, 2023 10:55

update logic

f9bf038

sai6855 added 2 commits March 6, 2023 03:39

patch

15d73f2

line break

2e56c29

sai6855 mentioned this pull request Mar 9, 2023

[Autocomplete] Clicking anywhere on Input should open listbox #29500

Closed

1 task

ZeeshanTamboli reviewed Mar 11, 2023

View reviewed changes

packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx Show resolved Hide resolved

siriwatknp reviewed Mar 11, 2023

View reviewed changes

sai6855 added 4 commits March 12, 2023 14:33

test patch

71e2268

prettier

ad958b3

empty commit to trigger CI

c0d1839

lint fix

72237c6

oliviertassinari reviewed Mar 15, 2023

View reviewed changes

sai6855 added 2 commits March 17, 2023 17:14

logic fix

c6fe3c0

undo

2c0873b

pass event

5b3e80f

sai6855 commented Mar 17, 2023

View reviewed changes

sai6855 requested a review from siriwatknp March 17, 2023 12:41

sai6855 commented Mar 18, 2023

View reviewed changes

siriwatknp approved these changes Mar 20, 2023

View reviewed changes

mnajdova reviewed Mar 21, 2023

View reviewed changes

mnajdova changed the title ~~[Autocomplete] Listen for click on border~~ [Autocomplete] Listen for click on the root element Mar 21, 2023

updated test name

85125ce

siriwatknp merged commit b4f0fa6 into mui:master Apr 4, 2023

This was referenced Jun 26, 2024

[material-ui][Autocomplete] Listbox opens and closes on click when used with limitTags #42432

Closed

[material-ui][Autocomplete] Fix listbox opens and closes on click when used with limitTags #42494

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Autocomplete] Listen for click on the root element #36369

[Autocomplete] Listen for click on the root element #36369

sai6855 commented Feb 28, 2023 •

edited

Loading

mui-bot commented Feb 28, 2023 •

edited

Loading

marcpachecog commented Mar 1, 2023

sai6855 commented Mar 1, 2023

sai6855 commented Mar 4, 2023 •

edited

Loading

siriwatknp Mar 11, 2023

sai6855 Mar 12, 2023

oliviertassinari Mar 15, 2023 •

edited

Loading

sai6855 Mar 17, 2023 •

edited

Loading

sai6855 Mar 17, 2023

sai6855 Mar 18, 2023 •

edited

Loading

sai6855 Mar 18, 2023

sai6855 Mar 18, 2023

siriwatknp left a comment

mnajdova Mar 21, 2023

sai6855 Mar 21, 2023

mnajdova Mar 21, 2023

sai6855 Mar 21, 2023

[Autocomplete] Listen for click on the root element #36369

[Autocomplete] Listen for click on the root element #36369

Conversation

sai6855 commented Feb 28, 2023 • edited Loading

mui-bot commented Feb 28, 2023 • edited Loading

Netlify deploy preview

Bundle size report

marcpachecog commented Mar 1, 2023

sai6855 commented Mar 1, 2023

sai6855 commented Mar 4, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Mar 15, 2023 • edited Loading

Choose a reason for hiding this comment

sai6855 Mar 17, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sai6855 Mar 18, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siriwatknp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sai6855 commented Feb 28, 2023 •

edited

Loading

mui-bot commented Feb 28, 2023 •

edited

Loading

sai6855 commented Mar 4, 2023 •

edited

Loading

oliviertassinari Mar 15, 2023 •

edited

Loading

sai6855 Mar 17, 2023 •

edited

Loading

sai6855 Mar 18, 2023 •

edited

Loading