fix: Disable combobox portal inside dialog

frontend/libs/studio-components/src/components/StudioCombobox/StudioCombobox.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { StudioCombobox } from './index';
+import { StudioModal } from '../StudioModal';
 
 type Story = StoryFn<typeof StudioCombobox>;
 
@@ -36,4 +37,20 @@ Preview.args = {
   multiple: true,
 };
 
+export const InModal: Story = (args) => {
+  return (
+    <StudioModal.Root>
+      <StudioModal.Trigger>Open modal</StudioModal.Trigger>
+      <StudioModal.Dialog heading='Dialog' closeButtonTitle='Close'>
+        <StudioCombobox {...args}>
+          <StudioCombobox.Empty>Empty</StudioCombobox.Empty>
+          <StudioCombobox.Option value='1'>Ole</StudioCombobox.Option>
+          <StudioCombobox.Option value='2'>Dole</StudioCombobox.Option>
+          <StudioCombobox.Option value='3'>Doffen</StudioCombobox.Option>
+        </StudioCombobox>
+      </StudioModal.Dialog>
+    </StudioModal.Root>
+  );
+};
+
 export default meta;

frontend/libs/studio-components/src/components/StudioCombobox/StudioCombobox.test.tsx

@@ -1,7 +1,10 @@
+import type { ForwardedRef, PropsWithChildren } from 'react';
 import React from 'react';
+import type { RenderOptions, RenderResult } from '@testing-library/react';
 import { render, screen, waitFor } from '@testing-library/react';
 import { StudioCombobox, type StudioComboboxProps } from './index';
 import userEvent from '@testing-library/user-event';
+import { testRefForwarding } from '../../test-utils/testRefForwarding';
 
 const options = {
   ole: 'Ole',
@@ -135,15 +138,63 @@ describe('StudioCombobox', () => {
     await user.click(clearButton);
     await verifyOnValueChange({ onValueChange, expectedNumberOfCalls: 1, expectedValue: [] });
   });
+
+  it('Renders the list box in portal mode by default', async () => {
+    const wrapperTestId = 'wrapper';
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <div data-testid={wrapperTestId}>{children}</div>
+    );
+    renderTestCombobox({}, { wrapper });
+    const combobox = screen.getByRole('combobox');
+    await userEvent.click(combobox);
+    expect(screen.getByTestId(wrapperTestId)).not.toContainElement(screen.getByRole('listbox'));
+  });
+
+  it('Renders the list box within the wrapper element when portal is set to false', async () => {
+    const wrapperTestId = 'wrapper';
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <div data-testid={wrapperTestId}>{children}</div>
+    );
+    renderTestCombobox({ portal: false }, { wrapper });
+    const combobox = screen.getByRole('combobox');
+    await userEvent.click(combobox);
+    expect(screen.getByTestId(wrapperTestId)).toContainElement(screen.getByRole('listbox'));
+  });
+
+  it('Renders the list box within the dialog element when used inside a dialog', async () => {
+    const user = userEvent.setup();
+    const wrapper = ({ children }: PropsWithChildren) => <dialog open>{children}</dialog>;
+    renderTestCombobox({}, { wrapper });
+    await user.click(screen.getByRole('combobox'));
+    expect(screen.getByRole('dialog')).toContainElement(screen.getByRole('listbox'));
+  });
+
+  it('Forwards the ref to the combobox element', () => {
+    testRefForwarding<HTMLInputElement>(
+      (ref) => renderTestCombobox({}, undefined, ref),
+      () => screen.getByRole('combobox'),
+    );
+  });
+
+  it('Sets the ref to null when unmounted', () => {
+    const ref = React.createRef<HTMLInputElement>();
+    const { unmount } = renderTestCombobox({}, undefined, ref);
+    unmount();
+    expect(ref.current).toBeNull();
+  });
 });
 
-const renderTestCombobox = (props?: StudioComboboxProps) => {
+const renderTestCombobox = (
+  props?: StudioComboboxProps,
+  renderOptions?: RenderOptions,
+  ref?: ForwardedRef<HTMLInputElement>,
+): RenderResult =>
   render(
-    <StudioCombobox {...props}>
+    <StudioCombobox {...props} ref={ref}>
       <StudioCombobox.Empty>{noResults}</StudioCombobox.Empty>
       <StudioCombobox.Option value={options.ole}>{options.ole}</StudioCombobox.Option>
       <StudioCombobox.Option value={options.dole}>{options.dole}</StudioCombobox.Option>
       <StudioCombobox.Option value={options.doffen}>{options.doffen}</StudioCombobox.Option>
     </StudioCombobox>,
+    renderOptions,
   );
-};

frontend/libs/studio-components/src/components/StudioCombobox/StudioCombobox.tsx

@@ -1,15 +1,32 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useCallback, useState } from 'react';
 import { Combobox } from '@digdir/designsystemet-react';
 //TODO: Update import path when v1 of the Design system has been updated to export it from index: https://github.com/Altinn/altinn-studio/issues/13531
 import type { ComboboxProps } from '@digdir/designsystemet-react/dist/types/components/form/Combobox/Combobox';
 import type { WithoutAsChild } from '../../types/WithoutAsChild';
+import { useForwardedRef } from '@studio/hooks';
+import { isWithinDialog } from './isWithinDialog';
 
 export type StudioComboboxProps = WithoutAsChild<ComboboxProps>;
 
 export const StudioCombobox = forwardRef<HTMLInputElement, StudioComboboxProps>(
-  ({ children, size = 'sm', ...rest }, ref): JSX.Element => {
+  ({ children, size = 'sm', portal: givenPortal = true, ...rest }, ref): JSX.Element => {
+    const forwardedRef = useForwardedRef<HTMLInputElement>(ref);
+    const [portal, setPortal] = useState<boolean>(givenPortal);
+
+    const removePortalIfInDialog = useCallback((node: HTMLInputElement | null): void => {
+      if (node && isWithinDialog(node)) setPortal(false);
+    }, []);
+
+    const internalRef = useCallback(
+      (node: HTMLInputElement | null): void => {
+        forwardedRef.current = node;
+        removePortalIfInDialog(node);
+      },
+      [forwardedRef, removePortalIfInDialog],
+    );
+
     return (
-      <Combobox ref={ref} size={size} {...rest}>
+      <Combobox ref={internalRef} size={size} {...rest} portal={portal}>
         {children}
       </Combobox>
     );

frontend/libs/studio-components/src/components/StudioCombobox/isWithinDialog.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { isWithinDialog } from './isWithinDialog';
+
+describe('isWithinDialog', () => {
+  it('Returns true when the element is inside a dialog', () => {
+    render(
+      <dialog open>
+        <button />
+      </dialog>,
+    );
+    const button = screen.getByRole('button');
+    expect(isWithinDialog(button)).toBe(true);
+  });
+
+  it('Returns false when the element is not inside a dialog', () => {
+    render(<button />);
+    const button = screen.getByRole('button');
+    expect(isWithinDialog(button)).toBe(false);
+  });
+});

frontend/libs/studio-components/src/components/StudioCombobox/isWithinDialog.ts

@@ -0,0 +1,3 @@
+export function isWithinDialog(element: HTMLElement): boolean {
+  return !!element?.closest('dialog');
+}