Input inside of a popover triggger

[H7ioo]

I have input inside of the Popover.Trigger and when pressing the Space key it triggers the keyboard interactions so I disabled it from the Popover.Trigger but the input inside of the component still fires the interaction and I can't disable pressing Space because duhh it is an input.

Any ideas about how to fix this issue?

• I tried controlling the input and slicing but if the cursor is in the middle when pressing space it push the cursor to the end

     <PopoverTrigger
          className="relative w-full">
          <Input
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            onKeyDown={(e) => {
              const cursorIndex = e.currentTarget.selectionStart;
              // I have to use this workaround because Radix doesn't support disabling keyboard actions and I have input so disabling the space can't be an option
              if (e.key === " ") {
                e.preventDefault();
                setSearchQuery(
                  (prev) =>
                    prev.slice(0, cursorIndex!) +
                    " " +
                    prev.slice(cursorIndex!),
                );
              }
            }}
          />
        </PopoverTrigger>

[H7ioo]

a clue about what I'm working on

[H7ioo]

My workaround:

    const [isOpen, setIsOpen] = useState(false);
    const inputRef = useRef<HTMLInputElement | null>(null);
    const [inputIndex, setInputIndex] = useState(0);

    useEffect(() => {
      inputRef.current!.selectionStart = inputIndex + 1;
      inputRef.current!.selectionEnd = inputIndex + 1;
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [searchQuery]);


        <Popover
          onOpenChange={(open) => setIsOpen(open)}
          open={isLoading ? false : isOpen}
        >
          <PopoverTrigger
            className="relative w-full"
            onClick={(e) => {
              const targetId: string | null | undefined = (e.target as Element)
                .id;
              if (targetId && targetId === "popoverInput" && isOpen) {
                e.preventDefault();
              }
            }}
            onFocus={() => {
              setIsOpen(true);
            }}
          >
            <Input
              id="popoverInput"
              ref={inputRef}
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="Kategori seçiniz"
              disabled={isLoading}
              onKeyDown={(e) => {
                // Another solution is to not use PopoverTrigger
                // I have to use this workaround because Radix doesn't support disabling keyboard actions and I have input so disabling the space can't be an option
                // This works by handling the cursor automatically
                const cursorIndexStart = e.currentTarget.selectionStart!;
                const cursorIndexEnd = e.currentTarget.selectionEnd!;
                const isSelect = !(cursorIndexStart === cursorIndexEnd);
                const isSelectAll =
                  cursorIndexStart + cursorIndexEnd ===
                  e.currentTarget.value.length;
                setInputIndex(
                  isSelect && !isSelectAll
                    ? cursorIndexStart - 1
                    : cursorIndexStart,
                );
                if (e.key === " ") {
                  e.preventDefault();
                  setSearchQuery(
                    (prev) =>
                      prev.slice(0, cursorIndexStart) +
                      " " +
                      prev.slice(cursorIndexStart),
                  );
                }
              }}
            />
// ...
          </PopoverTrigger>
          
             <PopoverContent
...
            onOpenAutoFocus={(e) => {
              e.preventDefault(); 
            }}
          >


// Content Here...
         
          </PopoverContent>
          </Popover>

issues:

• Can't tab into the popover, you can tab into the input.
• Complicated. I disabled a few features and handled them myself.

I cut the example out of context I hope the code is understandable

EDIT:
I suggest you figure out a solution yourself because there are cases you wouldn't understand unless you try it out.

[johirdipok]

I already worked on my personal case and have a kinda solution. I downloaded their(radixui) internal popover packages and codes from github. And I'm able to solve my specific case. At the same time I also downloaded their (radixui) hovercard codes and manipulated the code for my specific case. I found out that hover card's code is more flexible to manipulate than popover. I'm still testing those changes, once it's done. I will use it in my project.
Thanks for sharing some knowledge.

[H7ioo]

That looks better. Would be appreciated to leave the solution so other community members can benefit too.

[johirdipok]

Of course. I'm still not sure of my solution. Once it serves my purpose, I'll share my code.

[johirdipok]

Hey @H7ioo,
Sorry for late answer. I've been busy with some assignments.
This is what I've done so far. Please let me know what's your thought on the changes I've made.

import { composeEventHandlers } from "@radix-ui/primitive";
import { useComposedRefs } from "@radix-ui/react-compose-refs";
import { createContextScope } from "@radix-ui/react-context";
import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
import { useFocusGuards } from "@radix-ui/react-focus-guards";
import { FocusScope } from "@radix-ui/react-focus-scope";
import { useId } from "@radix-ui/react-id";
import * as PopperPrimitive from "@radix-ui/react-popper";
import { createPopperScope } from "@radix-ui/react-popper";
import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
import { Presence } from "@radix-ui/react-presence";
import { Primitive } from "@radix-ui/react-primitive";
import { Slot } from "@radix-ui/react-slot";
import { useControllableState } from "@radix-ui/react-use-controllable-state";
import { hideOthers } from "aria-hidden";
import * as React from "react";
import { RemoveScroll } from "react-remove-scroll";

import type { Scope } from "@radix-ui/react-context";

/* -------------------------------------------------------------------------------------------------
 * Popover
 * -----------------------------------------------------------------------------------------------*/

const POPOVER_NAME = "Popover";

type ScopedProps<P> = P & { __scopePopover?: Scope };
const [createPopoverContext, createPopoverScope] = createContextScope(
  POPOVER_NAME,
  [createPopperScope],
);
const usePopperScope = createPopperScope();

type PopoverContextValue = {
  triggerRef: React.RefObject<HTMLInputElement | null>;
  contentId: string;
  open: boolean;
  onOpenChange(open: boolean): void;
  onOpenToggle(): void;
  hasCustomAnchor: boolean;
  onCustomAnchorAdd(): void;
  onCustomAnchorRemove(): void;
  modal: boolean;
};

const [PopoverProvider, usePopoverContext] =
  createPopoverContext<PopoverContextValue>(POPOVER_NAME);

interface PopoverProps {
  children?: React.ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  modal?: boolean;
}

const Popover: React.FC<PopoverProps> = (props: ScopedProps<PopoverProps>) => {
  const {
    __scopePopover,
    children,
    open: openProp,
    defaultOpen,
    onOpenChange,
    modal = false,
  } = props;
  const popperScope = usePopperScope(__scopePopover);
  const triggerRef = React.useRef<HTMLInputElement>(null);
  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
  const [open = false, setOpen] = useControllableState({
    prop: openProp,
    defaultProp: defaultOpen,
    onChange: onOpenChange,
  });

  return (
    <PopperPrimitive.Root {...popperScope}>
      <PopoverProvider
        scope={__scopePopover}
        contentId={useId()}
        triggerRef={triggerRef}
        open={open}
        onOpenChange={setOpen}
        /**
         * ---- CHANGES I DID -------
         * I changed this line onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen)[setOpen])}
         * to         onOpenToggle={React.useCallback(() => setOpen(() => true), [setOpen])} this line.
         * that means I removed previous open params and setOpen to true
         */
        onOpenToggle={React.useCallback(() => setOpen(() => true), [setOpen])}
        hasCustomAnchor={hasCustomAnchor}
        onCustomAnchorAdd={React.useCallback(
          () => setHasCustomAnchor(true),
          [],
        )}
        onCustomAnchorRemove={React.useCallback(
          () => setHasCustomAnchor(false),
          [],
        )}
        modal={modal}
      >
        {children}
      </PopoverProvider>
    </PopperPrimitive.Root>
  );
};

Popover.displayName = POPOVER_NAME;

* -------------------------------------------------------------------------------------------------
 * PopoverTrigger
 * -----------------------------------------------------------------------------------------------*/

const TRIGGER_NAME = "PopoverTrigger";

/**
 * ---- CHANGES I DID -------
 * Primitive.input instead Primitive.input
 * PrimitiveInputProps instead PrimitiveButtonProps
 */
type PopoverTriggerElement = React.ElementRef<typeof Primitive.input>;
type PrimitiveInputProps = React.ComponentPropsWithoutRef<
  typeof Primitive.input
>;
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
interface PopoverTriggerProps extends PrimitiveInputProps {}

const PopoverTrigger = React.forwardRef<
  PopoverTriggerElement,
  PopoverTriggerProps
>((props: ScopedProps<PopoverTriggerProps>, forwardedRef) => {
  const { __scopePopover, ...triggerProps } = props;
  const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
  const popperScope = usePopperScope(__scopePopover);
  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);

  const trigger = (
    <Primitive.input
      type="input"
      aria-haspopup="dialog"
      aria-expanded={context.open}
      aria-controls={context.contentId}
      data-state={getState(context.open)}
      {...triggerProps}
      ref={composedTriggerRef}
      /**
       * ---- CHANGES I DID -------
       * Added onFocus Instead onclick, The onFocus function has taken from radix-ui hover card onFocus event.
       * onClick is disabled,
       * I want to trigger the popover when user focuses or click on the input field or navigate with keyboard from one input field to another input field.
       */

      onFocus={composeEventHandlers<
        React.FocusEvent<HTMLInputElement, Element>
      >(context.onOpenToggle)}

      // onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}
    />
  );

  return context.hasCustomAnchor ? (
    trigger
  ) : (
    <PopperPrimitive.Anchor asChild {...popperScope}>
      {trigger}
    </PopperPrimitive.Anchor>
  );
});

PopoverTrigger.displayName = TRIGGER_NAME;

/* -------------------------------------------------------------------------------------------------
 * PopoverPortal
 * -----------------------------------------------------------------------------------------------*/

const PORTAL_NAME = "PopoverPortal";

type PortalContextValue = { forceMount?: true };
const [PortalProvider, usePortalContext] =
  createPopoverContext<PortalContextValue>(PORTAL_NAME, {
    forceMount: undefined,
  });

type PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;
interface PopoverPortalProps {
  children?: React.ReactNode;
  /**
   * Specify a container element to portal the content into.
   */
  container?: PortalProps["container"];
  /**
   * Used to force mounting when more control is needed. Useful when
   * controlling animation with React animation libraries.
   */
  forceMount?: true;
}

const PopoverPortal: React.FC<PopoverPortalProps> = (
  props: ScopedProps<PopoverPortalProps>,
) => {
  const { __scopePopover, forceMount, children, container } = props;
  const context = usePopoverContext(PORTAL_NAME, __scopePopover);
  return (
    <PortalProvider scope={__scopePopover} forceMount={forceMount}>
      <Presence present={forceMount || context.open}>
        <PortalPrimitive asChild container={container}>
          {children}
        </PortalPrimitive>
      </Presence>
    </PortalProvider>
  );
};

PopoverPortal.displayName = PORTAL_NAME;

/* -------------------------------------------------------------------------------------------------
 * PopoverContent
 * -----------------------------------------------------------------------------------------------*/

const CONTENT_NAME = "PopoverContent";

interface PopoverContentProps extends PopoverContentTypeProps {
  /**
   * Used to force mounting when more control is needed. Useful when
   * controlling animation with React animation libraries.
   */
  forceMount?: true;
}

const PopoverContent = React.forwardRef<
  PopoverContentTypeElement,
  PopoverContentProps
>((props: ScopedProps<PopoverContentProps>, forwardedRef) => {
  const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
  const { forceMount = portalContext.forceMount, ...contentProps } = props;
  const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
  return (
    <Presence present={forceMount || context.open}>
      {context.modal ? (
        <PopoverContentModal {...contentProps} ref={forwardedRef} />
      ) : (
        <PopoverContentNonModal {...contentProps} ref={forwardedRef} />
      )}
    </Presence>
  );
});

PopoverContent.displayName = CONTENT_NAME;

/* -----------------------------------------------------------------------------------------------*/

type PopoverContentTypeElement = PopoverContentImplElement;
type PopoverContentTypeProps = Omit<
  PopoverContentImplProps,
  "trapFocus" | "disableOutsidePointerEvents"
>;

const PopoverContentModal = React.forwardRef<
  PopoverContentTypeElement,
  PopoverContentTypeProps
>((props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
  const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
  const contentRef = React.useRef<HTMLDivElement>(null);
  const composedRefs = useComposedRefs(forwardedRef, contentRef);
  const isRightClickOutsideRef = React.useRef(false);

  // aria-hide everything except the content (better supported equivalent to setting aria-modal)
  React.useEffect(() => {
    const content = contentRef.current;
    if (content) return hideOthers(content);
  }, []);

  return (
    <RemoveScroll as={Slot} allowPinchZoom>
      <PopoverContentImpl
        {...props}
        ref={composedRefs}
        // we make sure we're not trapping once it's been closed
        // (closed !== unmounted when animating out)
        trapFocus={context.open}
        disableOutsidePointerEvents
        onCloseAutoFocus={composeEventHandlers(
          props.onCloseAutoFocus,
          (event) => {
            event.preventDefault();
            if (!isRightClickOutsideRef.current)
              context.triggerRef.current?.focus();
          },
        )}
        onPointerDownOutside={composeEventHandlers(
          props.onPointerDownOutside,
          (event) => {
            const originalEvent = event.detail.originalEvent;
            const ctrlLeftClick =
              originalEvent.button === 0 && originalEvent.ctrlKey === true;
            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;

            isRightClickOutsideRef.current = isRightClick;
          },
          { checkForDefaultPrevented: false },
        )}
        // When focus is trapped, a `focusout` event may still happen.
        // We make sure we don't trigger our `onDismiss` in such case.
        onFocusOutside={composeEventHandlers(
          props.onFocusOutside,
          (event) => event.preventDefault(),
          { checkForDefaultPrevented: false },
        )}
      />
    </RemoveScroll>
  );
});

const PopoverContentNonModal = React.forwardRef<
  PopoverContentTypeElement,
  PopoverContentTypeProps
>((props: ScopedProps<PopoverContentTypeProps>, forwardedRef) => {
  const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
  const hasInteractedOutsideRef = React.useRef(false);
  const hasPointerDownOutsideRef = React.useRef(false);

  return (
    <PopoverContentImpl
      {...props}
      ref={forwardedRef}
      trapFocus={false}
      disableOutsidePointerEvents={false}
      onCloseAutoFocus={(event) => {
        props.onCloseAutoFocus?.(event);

        if (!event.defaultPrevented) {
          if (!hasInteractedOutsideRef.current)
            context.triggerRef.current?.focus();
          // Always prevent auto focus because we either focus manually or want user agent focus
          event.preventDefault();
        }

        hasInteractedOutsideRef.current = false;
        hasPointerDownOutsideRef.current = false;
      }}
      onInteractOutside={(event) => {
        props.onInteractOutside?.(event);

        if (!event.defaultPrevented) {
          hasInteractedOutsideRef.current = true;
          if (event.detail.originalEvent.type === "pointerdown") {
            hasPointerDownOutsideRef.current = true;
          }
        }

        // Prevent dismissing when clicking the trigger.
        // As the trigger is already setup to close, without doing so would
        // cause it to close and immediately open.
        const target = event.target as HTMLElement;
        const targetIsTrigger = context.triggerRef.current?.contains(target);
        if (targetIsTrigger) event.preventDefault();

        // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
        // we will get the pointer down outside event on the trigger, but then a subsequent
        // focus outside event on the container, we ignore any focus outside event when we've
        // already had a pointer down outside event.
        if (
          event.detail.originalEvent.type === "focusin" &&
          hasPointerDownOutsideRef.current
        ) {
          event.preventDefault();
        }
      }}
    />
  );
});

/* -----------------------------------------------------------------------------------------------*/

type PopoverContentImplElement = React.ElementRef<
  typeof PopperPrimitive.Content
>;
type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
type DismissableLayerProps = React.ComponentPropsWithoutRef<
  typeof DismissableLayer
>;
type PopperContentProps = React.ComponentPropsWithoutRef<
  typeof PopperPrimitive.Content
>;
interface PopoverContentImplProps
  extends Omit<PopperContentProps, "onPlaced">,
    Omit<DismissableLayerProps, "onDismiss"> {
  /**
   * Whether focus should be trapped within the `Popover`
   * (default: false)
   */
  trapFocus?: FocusScopeProps["trapped"];

  /**
   * Event handler called when auto-focusing on open.
   * Can be prevented.
   */
  onOpenAutoFocus?: FocusScopeProps["onMountAutoFocus"];

  /**
   * Event handler called when auto-focusing on close.
   * Can be prevented.
   */
  onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
}

const PopoverContentImpl = React.forwardRef<
  PopoverContentImplElement,
  PopoverContentImplProps
>((props: ScopedProps<PopoverContentImplProps>, forwardedRef) => {
  const {
    __scopePopover,
    trapFocus,
    onOpenAutoFocus,
    onCloseAutoFocus,
    disableOutsidePointerEvents,
    onEscapeKeyDown,
    onPointerDownOutside,
    onFocusOutside,
    onInteractOutside,
    ...contentProps
  } = props;
  const context = usePopoverContext(CONTENT_NAME, __scopePopover);
  const popperScope = usePopperScope(__scopePopover);

  // Make sure the whole tree has focus guards as our `Popover` may be
  // the last element in the DOM (because of the `Portal`)
  useFocusGuards();

  return (
    <FocusScope
      asChild
      loop
      trapped={trapFocus}
      onMountAutoFocus={onOpenAutoFocus}
      onUnmountAutoFocus={onCloseAutoFocus}
    >
      <DismissableLayer
        asChild
        disableOutsidePointerEvents={disableOutsidePointerEvents}
        onInteractOutside={onInteractOutside}
        onEscapeKeyDown={onEscapeKeyDown}
        onPointerDownOutside={onPointerDownOutside}
        onFocusOutside={onFocusOutside}
        onDismiss={() => context.onOpenChange(false)}
      >
        <PopperPrimitive.Content
          data-state={getState(context.open)}
          role="dialog"
          id={context.contentId}
          {...popperScope}
          {...contentProps}
          ref={forwardedRef}
          style={{
            ...contentProps.style,
            // re-namespace exposed content custom properties
            ...{
              "--radix-popover-content-transform-origin":
                "var(--radix-popper-transform-origin)",
              "--radix-popover-content-available-width":
                "var(--radix-popper-available-width)",
              "--radix-popover-content-available-height":
                "var(--radix-popper-available-height)",
              "--radix-popover-trigger-width":
                "var(--radix-popper-anchor-width)",
              "--radix-popover-trigger-height":
                "var(--radix-popper-anchor-height)",
            },
          }}
        />
      </DismissableLayer>
    </FocusScope>
  );
});


const ARROW_NAME = "PopoverArrow";

type PopoverArrowElement = React.ElementRef<typeof PopperPrimitive.Arrow>;
type PopperArrowProps = React.ComponentPropsWithoutRef<
  typeof PopperPrimitive.Arrow
>;
type PopoverArrowProps = PopperArrowProps;

const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(
  (props: ScopedProps<PopoverArrowProps>, forwardedRef) => {
    const { __scopePopover, ...arrowProps } = props;
    const popperScope = usePopperScope(__scopePopover);
    return (
      <PopperPrimitive.Arrow
        {...popperScope}
        {...arrowProps}
        ref={forwardedRef}
      />
    );
  },
);

PopoverArrow.displayName = ARROW_NAME;

/* -----------------------------------------------------------------------------------------------*/

function getState(open: boolean) {
  return open ? "open" : "closed";
}

const Root = Popover;
// const Anchor = PopoverAnchor;
const Trigger = PopoverTrigger;
const Portal = PopoverPortal;
const Content = PopoverContent;
// const Close = PopoverClose;
const Arrow = PopoverArrow;

export {
  // Anchor,
  Arrow,
  // Close,
  Content,
  createPopoverScope,
  //
  Popover,
  // PopoverAnchor,
  PopoverArrow,
  // PopoverClose,
  PopoverContent,
  PopoverPortal,
  PopoverTrigger,
  Portal,
  //
  Root,
  Trigger,
};
export type {
  // PopoverAnchorProps,
  PopoverArrowProps,
  // PopoverCloseProps,
  PopoverContentProps,
  PopoverPortalProps,
  PopoverProps,
  PopoverTriggerProps,
};

[blurymind]

I just ran into the same problem, trying to disable the autofocus behavior when using arrow buttons :( any solutions?

This is so broken that if you have an input field inside a dropdown menu that is a part of a menu bar, pressing arrow keys to move the caret will switch to a different menu