Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[autocomplete][docs] Improve Google Maps search example #44708

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Dec 9, 2024

Initially, I thought I could quickly handle https://developers.google.com/maps/documentation/javascript/places-migration-autocomplete. It was much harder than expected 😅

Preview: https://deploy-preview-44708--material-ui.netlify.app/material-ui/react-autocomplete/#google-maps-place

I have tried to make the demo crash, like in #35391 but couldn't find a way.

We can use https://console.cloud.google.com/google/maps-apis/metrics?hl=en&inv=1&invt=Abjs3A&project=material-ui-docs to keep track of the API usage, make sure it's still OK.


As for why work on this, see https://github.com/NiazMorshed2007/shadcn-address-autocomplete/, unless the community builds this, we need to stay up to date to stay relevant.


Side note, we are supposed to give logo attribution: https://developers.google.com/maps/documentation/javascript/policies#logo

If your application uses search fields with or without autocomplete, the logo must be displayed inline.

e.g. https://developers.google.com/maps/documentation/javascript/place-autocomplete-new

SCR-20241215-tpel

but I'm too lazy 😆. To create an issue. It's not at the quality bar that we set for ourselves.

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation component: autocomplete This is the name of the generic UI component, not the React module! labels Dec 9, 2024
@mui-bot
Copy link

mui-bot commented Dec 9, 2024

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 5ce77c0

@@ -1,10 +1,7 @@
export default function loadScript(src: string, position: HTMLElement | null) {
export default function loadScript(src: string, position: HTMLElement) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code style, no defensive logic in places where it's not their business logic to have.

@@ -147,25 +154,29 @@ export default function GoogleMaps() {
);
return (
<li key={key} {...optionProps}>
<Grid container sx={{ alignItems: 'center' }}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Migrate to Grid2, one more. We should really migrate the whole codebase.

Comment on lines -159 to +197
sx={{ fontWeight: part.highlight ? 'bold' : 'regular' }}
sx={{
fontWeight: part.highlight
? 'fontWeightBold'
: 'fontWeightRegular',
}}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rely on the design token, not hard-coded values.

import { debounce } from '@mui/material/utils';
import throttle from 'lodash/throttle';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Trying to go back to a better UX after #35545.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants