[docs][Autocomplete] Fix GoogleMaps demo

[hbjORbj]

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

Closes #35391

Problem:

• For some queries, the Google Maps Autocomplete demo crashes

Before:
(1) Go to https://mui.com/material-ui/react-autocomplete/#google-maps-place
(2) Enter "Darse de Baudour"
(3) Demo crashes

After:
(1) Go to https://deploy-preview-35545--material-ui.netlify.app/material-ui/react-autocomplete/#google-maps-place
(2) Enter "Darse de Baudour"
(3) Demo doesn't crash

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-35545--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against acc32bd

[oliviertassinari]

Thanks for looking at this bug, there are quite a few open-source projects just to solve this problem, so people will appreciate a quality demo 👍. A few more ideas to improve the Google Maps place demo:

1. There is an overflow issue, e.g. when searching for "zzzz"

2. Should we customize the noOptionsText prop? Maybe like "No places" would make more sense than "No options"?
3. The warning "Before you can start using the Google Maps JavaScript API and Places API, you must sign up and create a billing account." feels unclear. It doesn't explain why. I think that it should mention that it's to get an API key.
4. We frequently hit a rate limit error. I have configured some of it in our Google Cloud dashboard so we stay inside the free tier, but I don't understand why we get them. Maybe we could set the throttle at 400ms rather than 200ms?

5. Considering how we solve the problem of out-of-order requests, using throttle makes no sense. We effectively have a debounce, so we might as well use a debounce to make fewer network requests.

[hbjORbj]

1. There is an overflow issue, e.g. when searching for "zzzz"

Fixed.

2. Should we customize the noOptionsText prop? Maybe like "No places" would make more sense than "No options"?

Agree. I will go with "No locations".

3. The warning "Before you can start using the Google Maps JavaScript API and Places API, you must sign up and create a billing account." feels unclear. It doesn't explain why. I think that it should mention that it's to get an API key.

Yes, "Before you can start using the Google Maps JavaScript API and Places API, you need to get your own API key." sounds better.

[hbjORbj]

4. We frequently hit a rate limit error. I have configured some of it in our Google Cloud dashboard so we stay inside the free tier, but I don't understand why we get them. Maybe we could set the throttle at 400ms rather than 200ms?
5. Considering how we solve the problem of out-of-order requests, using throttle makes no sense. We effectively have a debounce, so we might as well use a debounce to make fewer network requests.

Replaced throttle with debounce from '@mui/material/utils' and changed 200ms to 400ms in this commit

[oliviertassinari]

I have pushed a few more changes that were not directly related to the initial problem but seemed to be a good opportunity to modernize the example, to use the features that were not available when the demo was first created.

I can't find anything else to improve 👍 , this is a much better demo 😄

[oliviertassinari]

Off-topic. I have just realized that the undo Ctrl+Z and redo shortcuts do nothing on our autocomplete. It's a bit frustrating. It works in Gmail:

I can't find any UI component that supports this (select2, react-select, downshift, react-spectrum, antd, they don't), so maybe an opportunity to get an edge on the UX side. Or maybe it's overkill 🤷‍♂️

[hbjORbj]

I can't find any UI component that supports this (select2, react-select, downshift, react-spectrum, antd, they don't), so maybe an opportunity to get an edge on the UX side. Or maybe it's overkill 🤷‍♂️

I don't really think it's an overkill ;) It's quite important for UX that undo/redo works.

[mnajdova]

No way this really happened (I wanted to test the "No locations" scenario) :D

The updates look good 👍