diff --git a/.storybook/static/autocomplete.css b/.storybook/static/autocomplete.css index 1f6ef0b84..2572383d6 100644 --- a/.storybook/static/autocomplete.css +++ b/.storybook/static/autocomplete.css @@ -131,6 +131,7 @@ padding: 0.5rem; scrollbar-width: none; width: 100%; + margin-top: 5px; } .algolia-autocomplete-dropdown::-webkit-scrollbar { diff --git a/packages/autocomplete-react/Autocomplete.tsx b/packages/autocomplete-react/Autocomplete.tsx index e6c61e641..913dd8342 100644 --- a/packages/autocomplete-react/Autocomplete.tsx +++ b/packages/autocomplete-react/Autocomplete.tsx @@ -4,7 +4,6 @@ import { h } from 'preact'; import { useRef, useState, useLayoutEffect } from 'preact/hooks'; import { createPortal } from 'preact/compat'; import { createPopper } from '@popperjs/core/lib/popper-lite'; -import offsetModifier from '@popperjs/core/lib/modifiers/offset'; import { createAutocomplete } from '../autocomplete-core'; import { getDefaultProps } from '../autocomplete-core/defaultProps'; @@ -85,7 +84,26 @@ export function Autocomplete( rendererProps.dropdownPlacement === 'end' ? 'bottom-end' : 'bottom-start', - modifiers: [{ ...offsetModifier, options: { offset: [0, 5] } }], + modifiers: [ + // By default, Popper overrides the `margin` style to 0 because it + // is known to cause issues when computing the position. + // We consider this as a problem in Autocomplete because it prevents + // users from setting different desktop/mobile styles in CSS. + // If we leave Popper overriding the margin, users would have to use + // the `!important` CSS keyword or we would have to expose a + // JavaScript API. + // See https://github.com/francoischalifour/autocomplete.js/pull/25. + { + name: 'unsetMargins', + enabled: true, + fn: ({ state }) => { + // @ts-ignore Popper's `CSSStyleDeclaration` is mistyped. + state.styles.popper.margin = null; + }, + requires: ['computeStyles'], + phase: 'beforeWrite', + }, + ], }); }