What is the need to use Portal for the likes of Select components

[veloware]

From the docs of Select (and similar components that have any kind of popover -

<Select.Root items={items}>
      <Select.Label>Framework</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Framework" />
          <Select.Indicator>
            <ChevronDownIcon />
          </Select.Indicator>
        </Select.Trigger>
        <Select.ClearTrigger>Clear</Select.ClearTrigger>
      </Select.Control>
      <Portal>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              {items.map((item) => (
                <Select.Item key={item} item={item}>
                  <Select.ItemText>{item}</Select.ItemText>
                  <Select.ItemIndicator>✓</Select.ItemIndicator>
                </Select.Item>
              ))}
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Portal>
      <Select.HiddenSelect />
    </Select.Root>

Im wondering what the need is for using Portals here? The reason I ask, im trialling out using Zag-js for a custom multi-select, and im using the docs and source code from Ark-UI as a guide, but have never came across the need to use Portals for components like this that has a popover, other than just applying relative positioning to the popover (which I assume is handled by the Select.Positioner?)

Thanks for your help

[segunadebayo]

Portals are helpful for breaking out of the DOM hierarchy so that your component isn't affected by nearby parent elements.

The Select.Positioner has position: absolute set on it, making it susceptible to issues when a parent element has position: relative. Portals are generally optional but recommended.

[Liinkiing]

Hey! I was indeed having the same thoughts so I was almost always wrapping the Positionner components with a Portal. It was also like this in the documentation, where we would see the <Portal> component around. But I've noticed now that on the documentation, the Portal component is not here by default on the examples, is there a reason about this? Maybe the Positioner now uses internally the Portal? Just wanted to have some information regarding this! Thanks again for the awesome library (Ark UI + Panda = 🤌)