diff --git a/package.json b/package.json index a8e47fb..92ef487 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "react-autocomplete-france", "description": "React components for France Address Gouv Autocomplete", "private": false, - "version": "1.0.1", + "version": "1.0.5", "type": "module", "author": "Clément de Louvencourt ", "license": "MIT", diff --git a/src/hooks/useAutocomplete.tsx b/src/hooks/useAutocomplete.tsx index 2037814..3b74306 100644 --- a/src/hooks/useAutocomplete.tsx +++ b/src/hooks/useAutocomplete.tsx @@ -10,6 +10,8 @@ interface UseAutocompleteProps { hasWatermark?: boolean containerStyle?: React.CSSProperties suggestionStyle?: React.CSSProperties + suggestionLabelStyle?: React.CSSProperties + alignementRef?: React.RefObject } const MapPin = (props: SVGProps) => ( @@ -34,10 +36,13 @@ function useAutocomplete({ limit = 5, hasWatermark = true, containerStyle = {}, - suggestionStyle = {} + suggestionStyle = {}, + suggestionLabelStyle = {}, + alignementRef }: UseAutocompleteProps) { const ref = useRef(null); + const alignementReference = alignementRef || ref; const [suggestions, setSuggestions] = useState([]); const [query, setQuery] = useState(''); @@ -84,11 +89,11 @@ function useAutocomplete({ }, [ref]); useEffect(() => { - if (ref.current) { - const { top, left, height, width } = ref.current.getBoundingClientRect(); - setPosition({ top: 0, left: 0, width }); + if (alignementReference.current) { + const { top, left, height, width } = alignementReference.current.getBoundingClientRect(); + setPosition({ top: top + height, left: left, width }); } - }, [ref.current, suggestions]); + }, [alignementReference.current, suggestions]); useEffect(() => { if (ref.current && suggestions.length > 0) { @@ -105,6 +110,7 @@ function useAutocomplete({ maxHeight: '200px', overflowY: 'auto', borderRadius: '4px', + boxShadow: '0 2px 4px rgba(0, 0, 0, 0.04)', ...containerStyle }} > @@ -121,6 +127,9 @@ function useAutocomplete({ fontFamily: 'inherit', whiteSpace: 'nowrap', overflow: 'hidden', + display: 'flex', + alignItems: 'center', + gap: 4, ...suggestionStyle }} onMouseDown={() => { @@ -130,7 +139,14 @@ function useAutocomplete({ if (onSuggestionSelected) onSuggestionSelected(suggestion); }} > - {suggestion.properties.label} + + {suggestion.properties.label} )) )} @@ -149,7 +165,9 @@ function useAutocomplete({ ); const portalElement = document.createElement('div'); + portalElement.id = 'autocomplete-portal'; portalElement.style.position = 'absolute'; + portalElement.style.zIndex = '9999'; portalElement.style.top = position.top + 'px'; portalElement.style.left = position.left + 'px'; portalElement.style.width = position.width + 'px';