Autocomplete without function in react modal

[vizardkill]

Summary

Autocomplete component does not work when used within @shopify/app-bridge-react modal

Expected behavior

The autocomplete component should be able to be displayed inside the modal

Actual behavior

It happens that the component's list items are displayed below the modal's view

this is my code:

`import { Autocomplete, Icon } from '@shopify/polaris'
import { SearchIcon } from '@shopify/polaris-icons'
import type { Product } from 'node_modules/@shopify/shopify-api/dist/ts/rest/admin/2024-04/product'
import { useCallback, useEffect, useMemo, useState } from 'react'

interface Props {
products: Product[]
value?: Product
onChange(value: Product): void
disabled?: boolean
}

export const AutocompleteProductShopify = ({ products, value, onChange, disabled }: Props): JSX.Element => {
const deselectedOptions = useMemo(
() =>
products.map((product) => ({
value: product.id as any,
label: product.title as any
})),
[products]
)

const [selectedOptions, setSelectedOptions] = useState<string[]>([])
const [inputValue, setInputValue] = useState('')
const [options, setOptions] = useState(deselectedOptions)

const updateText = useCallback(
(value: string) => {
setInputValue(value)

  if (value === '') {
    setOptions(deselectedOptions)
    return
  }

  const filterRegex = new RegExp(value, 'i')
  const resultOptions = deselectedOptions.filter((option) => option.label.match(filterRegex))
  setOptions(resultOptions)
},
[deselectedOptions]

)

const updateSelection = useCallback(
(selected: string[]) => {
const selectedValue = selected.map((selectedItem) => {
const matchedOption = options.find((option) => {
return option.value === selectedItem
})
return matchedOption && matchedOption.label
})

  const filterRegex = new RegExp(selectedValue[0], 'i')
  const product = products.find((p) => p.title?.match(filterRegex))

  setSelectedOptions(selected)
  setInputValue(selectedValue[0] || '')

  if (product) {
    onChange(product)
  }
},
[options]

)

useEffect(() => {
if (value) {
setInputValue(value.title as string)
setSelectedOptions([value.title as string])
}
}, [value])

const textField = (
<Autocomplete.TextField
id="list-products-input"
onChange={updateText}
label="Productos de tu tienda Shopify"
value={inputValue}
prefix={}
helpText="Aquí se mostrarán todos los productos creados en tu tienda Shopify."
placeholder="Buscar producto"
disabled={disabled}
autoComplete="off"
/>
)

return (
<div style={{ position: 'relative', zIndex: 1 }}>


)
}
`

<Modal id="modal-sync-product" variant="large" onShow={() => updateLoadingStatus(productSelectedRef.current, LoadingStatus.Loading)} onHide={() => updateLoadingStatus(productSelectedRef.current, LoadingStatus.Cancel)} > <Box padding="500"> <Box paddingBlockStart="300"> <AutocompleteProductShopify products={productShopify?.data as Product[]} value={optionsModal.productShopify} disabled={isSaving} onChange={(value) => handleChangeOptions('productShopify', value)} /> </Box> </Box> <TitleBar title="Sincronizar producto"> <button variant="primary" onClick={() => syncProduct()} disabled={!readyToSync || isSaving}> Sincronizar </button> <button onClick={() => shopify.modal.hide('modal-sync-product')} disabled={isSaving}> Cancelar </button> </TitleBar> </Modal>

Steps to reproduce

Link to sandbox
1.
2.
3.

Are you using React components?

Yes

Polaris version number

13.7.0

Browser

Chrome

Device

Windows

[DaveEshopGuide]

Stumbled on this too...

[antonioandrade]

Same here today, Autosuggest nested inside Modal will have the options list rendered beneath the modal backdrop (exactly as seen above) : /