[BUG] - Autocomplete Popover has wrong positioning on iOS

[Theofilos-Chamalis]

NextUI Version

2.3.6

Describe the bug

When opening the popover of an Autocomplete component on iOS (tested Safari, Chrome, Brave), it has wrong position initially, which gets fixed after closing and opening it multiple times.

This behavior does not appear on a desktop browser on any screen size/resolution including the ones provided by the Chrome DevTools.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

import { FunctionComponent, useMemo } from 'react';
import type { ILocationPoint } from '../services/index';
import { Autocomplete, AutocompleteItem, AutocompleteSection } from '@nextui-org/react';
import { FaCheck, FaLocationDot } from 'react-icons/fa6';
import { selectedLocationAtom } from '@/store/store';
import { useAtom } from 'jotai';
import useTranslation from 'next-translate/useTranslation';

interface SearchInputProps {
  locationPoints: ILocationPoint[] | undefined;
}

const SearchInput: FunctionComponent<SearchInputProps> = ({ locationPoints }) => {
  const [selectedLocation, setSelectedLocation] = useAtom(selectedLocationAtom);
  const { t } = useTranslation('common');

  const headingClasses =
    'flex w-full sticky top-1 z-20 py-1.5 px-2 bg-default-100 shadow-lg font-bold text-sm text-slate-700 rounded-lg';

  const geoSectionsMap = useMemo(() => {
    const geoNamesDuplicated = locationPoints?.map(point => point.geo_name) || [];
    const geoNames = [...new Set(geoNamesDuplicated)];
    const map = new Map<string, ILocationPoint[]>();
    geoNames.forEach(geoName => map.set(geoName, []));

    locationPoints?.forEach(point => map.set(point.geo_name, [...map.get(point.geo_name)!, point]));

    return map;
  }, [locationPoints]);

  const renderGeoSections = () => {
    const sectionsToRender = [];

    for (const [geoName, points] of geoSectionsMap) {
      sectionsToRender.push(
        <AutocompleteSection
          key={geoName}
          title={geoName}
          classNames={{
            heading: headingClasses,
          }}>
          {points.map(point => (
            <AutocompleteItem
              key={point.id}
              onClick={() => setSelectedLocation(point)}
              selectedIcon={
                selectedLocation?.id === point.id && <FaCheck className='text-black' size={16} />
              }>
              {point.site_name}
            </AutocompleteItem>
          ))}
        </AutocompleteSection>,
      );
    }

    return sectionsToRender;
  };

  return (
    <Autocomplete
      autoFocus={false}
      label={
        <p className='text-black font-semibold text-lg leading-6 pl-0.5'>
          {t('search_input.title')}
        </p>
      }
      variant='flat'
      startContent={<FaLocationDot className='text-black mb-1' size={16} />}
      placeholder={t('search_input.placeholder')}
      classNames={{
        base: 'bg-white rounded-2xl shadow-xl hover:bg-white',
        selectorButton: 'text-black text-2xl',
        clearButton: 'text-xl text-black',
      }}
      style={{ fontSize: '1rem' }}
      radius='lg'
      onSelectionChange={item => !item && setSelectedLocation(null)}
      popoverProps={{
        offset: 8,
        classNames: {
          content: 'w-full',
        },
      }}
      scrollShadowProps={{
        isEnabled: true,
      }}>
      {renderGeoSections()}
    </Autocomplete>
  );
};

export default SearchInput;

Expected behavior

The popover should appear directly below the autocomplete input field with no left margin

Screenshots or Videos

Operating System Version

iOS 17.4.1

Browser

Chrome

[linear[bot]]

ENG-727 [BUG] - Autocomplete Popover has wrong positioning on iOS