@lattice-ui/combobox 0.5.0-next.1 → 0.5.0-next.3

package/out/Combobox/ComboboxContent.luau

@@ -1,19 +1,29 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local composeRefs = _core.composeRefs
+local getElementRef = _core.getElementRef
 local React = _core.React
-local Slot = _core.Slot
 local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
 local DismissableLayer = _layer.DismissableLayer
 local Presence = _layer.Presence
 local _motion = TS.import(script, TS.getModule(script, "@lattice-ui", "motion").out)
-local createPopperEntranceRecipe = _motion.createPopperEntranceRecipe
-local usePresenceMotion = _motion.usePresenceMotion
+local createCanvasGroupPopperEntranceRecipe = _motion.createCanvasGroupPopperEntranceRecipe
+local usePresenceMotionController = _motion.usePresenceMotionController
 local usePopper = TS.import(script, TS.getModule(script, "@lattice-ui", "popper").out).usePopper
 local useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
 local CONTENT_OFFSET = 6
+local HIDDEN_POSITION = UDim2.fromOffset(-9999, -9999)
+local function toGuiPropBag(value)
+	local _value = value
+	return if type(_value) == "table" then value else {}
+end
 local function toGuiObject(instance)
-	if not instance or not instance:IsA("GuiObject") then
+	local _result = instance
+	if _result ~= nil then
+		_result = _result:IsA("GuiObject")
+	end
+	if not _result then
 		return nil
 	end
 	return instance
@@ -21,43 +31,69 @@ end
 local function ComboboxContentImpl(props)
 	local comboboxContext = useComboboxContext()
 	local open = comboboxContext.open
+	local shouldMeasure = open or props.motionPresent or props.onExitComplete ~= nil
+	local contentBoundaryRef = React.useRef()
 	local popper = usePopper({
 		anchorRef = comboboxContext.anchorRef,
 		contentRef = comboboxContext.contentRef,
+		alignOffset = props.alignOffset,
+		collisionPadding = props.collisionPadding,
+		sideOffset = props.sideOffset,
 		placement = props.placement,
-		offset = props.offset,
-		padding = props.padding,
-		enabled = open,
+		enabled = shouldMeasure,
 	})
 	local defaultTransition = React.useMemo(function()
-		return createPopperEntranceRecipe(popper.placement, CONTENT_OFFSET)
+		return createCanvasGroupPopperEntranceRecipe(popper.placement, CONTENT_OFFSET)
 	end, { popper.placement })
-	local motionRef = usePresenceMotion(props.motionPresent and popper.isPositioned, props.transition or defaultTransition, props.onExitComplete)
+	local recipe = props.transition or defaultTransition
+	local motion = usePresenceMotionController({
+		present = props.motionPresent,
+		ready = popper.isPositioned,
+		forceMount = props.forceMount,
+		config = recipe,
+		onExitComplete = props.onExitComplete,
+	})
 	local setContentRef = React.useCallback(function(instance)
-		comboboxContext.contentRef.current = toGuiObject(instance)
-		motionRef.current = toGuiObject(instance)
-	end, { comboboxContext.contentRef, motionRef })
+		local guiObject = toGuiObject(instance)
+		comboboxContext.contentRef.current = guiObject
+		contentBoundaryRef.current = guiObject
+		motion.ref.current = guiObject
+	end, { comboboxContext.contentRef, motion.ref })
 	local handleDismiss = React.useCallback(function()
 		comboboxContext.setOpen(false)
 	end, { comboboxContext })
-	local isActuallyVisible = open or (props.motionPresent and popper.isPositioned)
+	local shouldRender = motion.mounted
+	local contentVisible = shouldRender and (motion.present or motion.phase ~= "exited")
+	local popperPosition = if popper.isPositioned then popper.position else HIDDEN_POSITION
+	local popperContentSize = popper.contentSize or Vector2.new(0, 0)
+	local popperWrapperSize = if popper.isPositioned then UDim2.fromOffset(popperContentSize.X, popperContentSize.Y) else UDim2.fromOffset(0, 0)
 	local contentNode = if props.asChild then ((function()
 		local child = props.children
 		if not React.isValidElement(child) then
 			error("[ComboboxContent] `asChild` requires a child element.")
 		end
-		return React.createElement(Slot, {
-			AnchorPoint = popper.anchorPoint,
-			Visible = isActuallyVisible,
+		local childProps = toGuiPropBag(child.props)
+		local childRef = getElementRef(child)
+		local _exp = child
+		local _object = table.clone(childProps)
+		setmetatable(_object, nil)
+		_object.Position = UDim2.fromOffset(0, 0)
+		_object.Visible = contentVisible
+		_object.ref = composeRefs(childRef)
+		return React.createElement("canvasgroup", {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromOffset(0, 0),
+			Visible = contentVisible,
 			ref = setContentRef,
-		}, child)
-	end)()) else (React.createElement("frame", {
-		AnchorPoint = popper.anchorPoint,
+		}, React.cloneElement(_exp, _object))
+	end)()) else (React.createElement("canvasgroup", {
 		AutomaticSize = Enum.AutomaticSize.XY,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
 		Size = UDim2.fromOffset(0, 0),
-		Visible = isActuallyVisible,
+		Visible = contentVisible,
 		ref = setContentRef,
 	}, props.children))
 	return React.createElement(DismissableLayer, {
@@ -67,11 +103,14 @@ local function ComboboxContentImpl(props)
 		onDismiss = handleDismiss,
 		onInteractOutside = props.onInteractOutside,
 		onPointerDownOutside = props.onPointerDownOutside,
+		contentBoundaryRef = contentBoundaryRef,
 	}, React.createElement("frame", {
+		AnchorPoint = popper.anchorPoint,
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		Position = if popper.isPositioned then popper.position else UDim2.fromOffset(-9999, -9999),
-		Size = UDim2.fromOffset(0, 0),
+		Position = popperPosition,
+		Size = popperWrapperSize,
+		Visible = shouldRender,
 	}, contentNode))
 end
 local function ComboboxContent(props)
@@ -80,13 +119,14 @@ local function ComboboxContent(props)
 	if props.forceMount then
 		return React.createElement(ComboboxContentImpl, {
 			asChild = props.asChild,
+			alignOffset = props.alignOffset,
+			collisionPadding = props.collisionPadding,
 			forceMount = props.forceMount,
 			motionPresent = open,
-			offset = props.offset,
 			onInteractOutside = props.onInteractOutside,
 			onPointerDownOutside = props.onPointerDownOutside,
-			padding = props.padding,
 			placement = props.placement,
+			sideOffset = props.sideOffset,
 			transition = props.transition,
 		}, props.children)
 	end
@@ -95,14 +135,15 @@ local function ComboboxContent(props)
 		render = function(state)
 			return React.createElement(ComboboxContentImpl, {
 				asChild = props.asChild,
+				alignOffset = props.alignOffset,
+				collisionPadding = props.collisionPadding,
 				forceMount = props.forceMount,
 				motionPresent = state.isPresent,
-				offset = props.offset,
 				onExitComplete = state.onExitComplete,
 				onInteractOutside = props.onInteractOutside,
 				onPointerDownOutside = props.onPointerDownOutside,
-				padding = props.padding,
 				placement = props.placement,
+				sideOffset = props.sideOffset,
 				transition = props.transition,
 			}, props.children)
 		end,

package/out/Combobox/ComboboxInput.luau

@@ -4,8 +4,13 @@ local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
 local useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
+local UserInputService = game:GetService("UserInputService")
 local function toTextBox(instance)
-	if not instance or not instance:IsA("TextBox") then
+	local _result = instance
+	if _result ~= nil then
+		_result = _result:IsA("TextBox")
+	end
+	if not _result then
 		return nil
 	end
 	return instance
@@ -32,6 +37,9 @@ local function ComboboxInput(props)
 		if textBox.Text == lastInputValueRef.current then
 			return nil
 		end
+		if UserInputService:GetFocusedTextBox() ~= textBox then
+			return nil
+		end
 		if disabled or readOnly then
 			if textBox.Text ~= lastInputValueRef.current then
 				textBox.Text = lastInputValueRef.current

package/out/Combobox/ComboboxItem.luau

@@ -12,14 +12,10 @@ local function ComboboxItem(props)
 	if _condition == nil then
 		_condition = props.value
 	end
-	local itemQueryMatch = comboboxContext.filterFn(_condition, comboboxContext.inputValue)
+	local textValue = _condition
+	local itemQueryMatch = comboboxContext.filterFn(textValue, comboboxContext.queryValue)
 	local disabled = comboboxContext.disabled or props.disabled == true
 	local interactionDisabled = disabled or not itemQueryMatch
-	local _condition_1 = props.textValue
-	if _condition_1 == nil then
-		_condition_1 = props.value
-	end
-	local textValue = _condition_1
 	local disabledRef = React.useRef(disabled)
 	local textValueRef = React.useRef(textValue)
 	React.useEffect(function()

package/out/Combobox/ComboboxRoot.luau

@@ -74,6 +74,7 @@ local function ComboboxRoot(props)
 	local _binding_2 = useControllableState(_object_1)
 	local inputValue = _binding_2[1]
 	local setInputValueState = _binding_2[2]
+	local visibleQueryValue, setVisibleQueryValue = React.useState(inputValue)
 	local disabled = props.disabled == true
 	local readOnly = props.readOnly == true
 	local required = props.required == true
@@ -84,6 +85,7 @@ local function ComboboxRoot(props)
 	local contentRef = React.useRef()
 	local itemEntriesRef = React.useRef({})
 	local itemTextCacheRef = React.useRef({})
+	local programmaticInputValueRef = React.useRef()
 	local registryRevision, setRegistryRevision = React.useState(0)
 	local registerItem = React.useCallback(function(item)
 		local _exp = itemEntriesRef.current
@@ -169,6 +171,7 @@ local function ComboboxRoot(props)
 			_result = ""
 		end
 		local nextInputValue = _result
+		programmaticInputValueRef.current = nextInputValue
 		setInputValueState(nextInputValue)
 	end, { getItemText, setInputValueState, value })
 	local setOpen = React.useCallback(function(nextOpen)
@@ -195,7 +198,11 @@ local function ComboboxRoot(props)
 		end
 		-- ▲ ReadonlyArray.find ▲
 		local selected = _result
-		if selected and selected.getDisabled() then
+		local _result_1 = selected
+		if _result_1 ~= nil then
+			_result_1 = _result_1.getDisabled()
+		end
+		if _result_1 then
 			return nil
 		end
 		setValueState(nextValue)
@@ -204,12 +211,21 @@ local function ComboboxRoot(props)
 			_condition_2 = nextValue
 		end
 		local nextInputValue = _condition_2
+		programmaticInputValueRef.current = nextInputValue
 		setInputValueState(nextInputValue)
 	end, { disabled, getItemText, resolveOrderedItems, setInputValueState, setValueState })
 	local setInputValue = React.useCallback(function(nextInputValue)
 		if disabled or readOnly then
 			return nil
 		end
+		if programmaticInputValueRef.current ~= nil and nextInputValue == programmaticInputValueRef.current then
+			programmaticInputValueRef.current = nil
+			return nil
+		end
+		programmaticInputValueRef.current = nil
+		setVisibleQueryValue(function(currentQueryValue)
+			return if currentQueryValue == nextInputValue then currentQueryValue else nextInputValue
+		end)
 		if nextInputValue == inputValue then
 			return nil
 		end
@@ -234,7 +250,11 @@ local function ComboboxRoot(props)
 			return nil
 		end
 		syncInputFromValue()
-	end, { open, syncInputFromValue, value })
+		setVisibleQueryValue(function(currentQueryValue)
+			return if currentQueryValue == inputValue then currentQueryValue else inputValue
+		end)
+	end, { inputValue, open, syncInputFromValue, value })
+	local queryValue = if open then visibleQueryValue else inputValue
 	local contextValue = React.useMemo(function()
 		return {
 			open = open,
@@ -242,6 +262,7 @@ local function ComboboxRoot(props)
 			value = value,
 			setValue = setValue,
 			inputValue = inputValue,
+			queryValue = queryValue,
 			setInputValue = setInputValue,
 			syncInputFromValue = syncInputFromValue,
 			disabled = disabled,
@@ -255,7 +276,7 @@ local function ComboboxRoot(props)
 			registerItem = registerItem,
 			getItemText = getItemText,
 		}
-	end, { disabled, filterFn, getItemText, inputValue, open, readOnly, registerItem, required, resolveOrderedItems, setInputValue, setOpen, setValue, syncInputFromValue, value })
+	end, { disabled, filterFn, getItemText, inputValue, open, queryValue, readOnly, registerItem, required, resolveOrderedItems, setInputValue, setOpen, setValue, syncInputFromValue, value, visibleQueryValue })
 	return React.createElement(ComboboxContextProvider, {
 		value = contextValue,
 	}, props.children)

package/out/Combobox/ComboboxTrigger.luau

@@ -5,7 +5,11 @@ local React = _core.React
 local Slot = _core.Slot
 local useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
 local function toGuiObject(instance)
-	if not instance or not instance:IsA("GuiObject") then
+	local _result = instance
+	if _result ~= nil then
+		_result = _result:IsA("GuiObject")
+	end
+	if not _result then
 		return nil
 	end
 	return instance

package/out/Combobox/types.d.ts

@@ -19,6 +19,7 @@ export type ComboboxContextValue = {
     value?: string;
     setValue: ComboboxSetValue;
     inputValue: string;
+    queryValue: string;
     setInputValue: ComboboxSetInputValue;
     syncInputFromValue: () => void;
     disabled: boolean;
@@ -75,8 +76,9 @@ export type ComboboxContentProps = {
     asChild?: boolean;
     forceMount?: boolean;
     placement?: PopperPlacement;
-    offset?: Vector2;
-    padding?: number;
+    sideOffset?: number;
+    alignOffset?: number;
+    collisionPadding?: number;
     onPointerDownOutside?: (event: LayerInteractEvent) => void;
     onInteractOutside?: (event: LayerInteractEvent) => void;
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lattice-ui/combobox",
-  "version": "0.5.0-next.1",
+  "version": "0.5.0-next.3",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
@@ -16,10 +16,10 @@
     "url": "https://github.com/astra-void/lattice-ui.git"
   },
   "dependencies": {
-    "@lattice-ui/core": "0.5.0-next.1",
-    "@lattice-ui/layer": "0.5.0-next.1",
-    "@lattice-ui/motion": "0.5.0-next.1",
-    "@lattice-ui/popper": "0.5.0-next.1"
+    "@lattice-ui/core": "0.5.0-next.3",
+    "@lattice-ui/layer": "0.5.0-next.3",
+    "@lattice-ui/popper": "0.5.0-next.3",
+    "@lattice-ui/motion": "0.5.0-next.3"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",
@@ -31,8 +31,8 @@
   },
   "scripts": {
     "build": "rbxtsc -p tsconfig.json",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "lint": "biome check src",
+    "lint:fix": "biome check src --write --unsafe",
     "typecheck": "tsc -p tsconfig.typecheck.json",
     "watch": "rbxtsc -p tsconfig.json -w"
   }

package/src/Combobox/ComboboxContent.tsx

@@ -1,16 +1,23 @@
-import { React, Slot } from "@lattice-ui/core";
+import { composeRefs, getElementRef, React } from "@lattice-ui/core";
 import type { LayerInteractEvent } from "@lattice-ui/layer";
 import { DismissableLayer, Presence } from "@lattice-ui/layer";
-import { createPopperEntranceRecipe, usePresenceMotion } from "@lattice-ui/motion";
+import { createCanvasGroupPopperEntranceRecipe, usePresenceMotionController } from "@lattice-ui/motion";
 import type { PopperPlacement } from "@lattice-ui/popper";
 import { usePopper } from "@lattice-ui/popper";
 import { useComboboxContext } from "./context";
 import type { ComboboxContentProps } from "./types";
 
 const CONTENT_OFFSET = 6;
+const HIDDEN_POSITION = UDim2.fromOffset(-9999, -9999);
+
+type GuiPropBag = React.Attributes & Record<string, unknown>;
+
+function toGuiPropBag(value: unknown): GuiPropBag {
+  return typeIs(value, "table") ? (value as GuiPropBag) : {};
+}
 
 function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
+  if (!instance?.IsA("GuiObject")) {
     return undefined;
   }
   return instance;
@@ -20,8 +27,9 @@ function ComboboxContentImpl(props: {
   motionPresent: boolean;
   onExitComplete?: () => void;
   placement?: PopperPlacement;
-  offset?: Vector2;
-  padding?: number;
+  sideOffset?: number;
+  alignOffset?: number;
+  collisionPadding?: number;
   forceMount?: boolean;
   onPointerDownOutside?: (event: LayerInteractEvent) => void;
   onInteractOutside?: (event: LayerInteractEvent) => void;
@@ -31,38 +39,54 @@ function ComboboxContentImpl(props: {
 }) {
   const comboboxContext = useComboboxContext();
   const open = comboboxContext.open;
+  const shouldMeasure = open || props.motionPresent || props.onExitComplete !== undefined;
+  const contentBoundaryRef = React.useRef<GuiObject>();
 
   const popper = usePopper({
     anchorRef: comboboxContext.anchorRef,
     contentRef: comboboxContext.contentRef,
+    alignOffset: props.alignOffset,
+    collisionPadding: props.collisionPadding,
+    sideOffset: props.sideOffset,
     placement: props.placement,
-    offset: props.offset,
-    padding: props.padding,
-    enabled: open,
+    enabled: shouldMeasure,
   });
 
   const defaultTransition = React.useMemo(
-    () => createPopperEntranceRecipe(popper.placement, CONTENT_OFFSET),
+    () => createCanvasGroupPopperEntranceRecipe(popper.placement, CONTENT_OFFSET),
     [popper.placement],
   );
-  const motionRef = usePresenceMotion<GuiObject>(
-    props.motionPresent && popper.isPositioned,
-    props.transition ?? defaultTransition,
-    props.onExitComplete,
-  );
+  const recipe = props.transition ?? defaultTransition;
+
+  const motion = usePresenceMotionController<GuiObject>({
+    present: props.motionPresent,
+    ready: popper.isPositioned,
+    forceMount: props.forceMount,
+    config: recipe,
+    onExitComplete: props.onExitComplete,
+  });
 
   const setContentRef = React.useCallback(
     (instance: Instance | undefined) => {
-      comboboxContext.contentRef.current = toGuiObject(instance);
-      motionRef.current = toGuiObject(instance);
+      const guiObject = toGuiObject(instance);
+      comboboxContext.contentRef.current = guiObject;
+      contentBoundaryRef.current = guiObject;
+      motion.ref.current = guiObject;
     },
-    [comboboxContext.contentRef, motionRef],
+    [comboboxContext.contentRef, motion.ref],
   );
 
   const handleDismiss = React.useCallback(() => {
     comboboxContext.setOpen(false);
   }, [comboboxContext]);
-  const isActuallyVisible = open || (props.motionPresent && popper.isPositioned);
+
+  const shouldRender = motion.mounted;
+  const contentVisible = shouldRender && (motion.present || motion.phase !== "exited");
+  const popperPosition = popper.isPositioned ? popper.position : HIDDEN_POSITION;
+  const popperContentSize = (popper as { contentSize?: Vector2 }).contentSize ?? new Vector2(0, 0);
+  const popperWrapperSize = popper.isPositioned
+    ? UDim2.fromOffset(popperContentSize.X, popperContentSize.Y)
+    : UDim2.fromOffset(0, 0);
 
   const contentNode = props.asChild ? (
     (() => {
@@ -71,24 +95,38 @@ function ComboboxContentImpl(props: {
         error("[ComboboxContent] `asChild` requires a child element.");
       }
 
+      const childProps = toGuiPropBag((child as { props?: unknown }).props);
+      const childRef = getElementRef<Instance>(child);
+
       return (
-        <Slot AnchorPoint={popper.anchorPoint} Visible={isActuallyVisible} ref={setContentRef}>
-          {child}
-        </Slot>
+        <canvasgroup
+          AutomaticSize={Enum.AutomaticSize.XY}
+          BackgroundTransparency={1}
+          BorderSizePixel={0}
+          Size={UDim2.fromOffset(0, 0)}
+          Visible={contentVisible}
+          ref={setContentRef as React.Ref<CanvasGroup>}
+        >
+          {React.cloneElement(child as React.ReactElement<GuiPropBag>, {
+            ...childProps,
+            Position: UDim2.fromOffset(0, 0),
+            Visible: contentVisible,
+            ref: composeRefs(childRef),
+          })}
+        </canvasgroup>
       );
     })()
   ) : (
-    <frame
-      AnchorPoint={popper.anchorPoint}
+    <canvasgroup
       AutomaticSize={Enum.AutomaticSize.XY}
       BackgroundTransparency={1}
       BorderSizePixel={0}
       Size={UDim2.fromOffset(0, 0)}
-      Visible={isActuallyVisible}
+      Visible={contentVisible}
       ref={setContentRef}
     >
       {props.children}
-    </frame>
+    </canvasgroup>
   );
 
   return (
@@ -99,12 +137,15 @@ function ComboboxContentImpl(props: {
       onDismiss={handleDismiss}
       onInteractOutside={props.onInteractOutside}
       onPointerDownOutside={props.onPointerDownOutside}
+      contentBoundaryRef={contentBoundaryRef}
     >
       <frame
+        AnchorPoint={popper.anchorPoint}
         BackgroundTransparency={1}
         BorderSizePixel={0}
-        Position={popper.isPositioned ? popper.position : UDim2.fromOffset(-9999, -9999)}
-        Size={UDim2.fromOffset(0, 0)}
+        Position={popperPosition}
+        Size={popperWrapperSize}
+        Visible={shouldRender}
       >
         {contentNode}
       </frame>
@@ -120,13 +161,14 @@ export function ComboboxContent(props: ComboboxContentProps) {
     return (
       <ComboboxContentImpl
         asChild={props.asChild}
+        alignOffset={props.alignOffset}
+        collisionPadding={props.collisionPadding}
         forceMount={props.forceMount}
         motionPresent={open}
-        offset={props.offset}
         onInteractOutside={props.onInteractOutside}
         onPointerDownOutside={props.onPointerDownOutside}
-        padding={props.padding}
         placement={props.placement}
+        sideOffset={props.sideOffset}
         transition={props.transition}
       >
         {props.children}
@@ -140,14 +182,15 @@ export function ComboboxContent(props: ComboboxContentProps) {
       render={(state) => (
         <ComboboxContentImpl
           asChild={props.asChild}
+          alignOffset={props.alignOffset}
+          collisionPadding={props.collisionPadding}
           forceMount={props.forceMount}
           motionPresent={state.isPresent}
-          offset={props.offset}
           onExitComplete={state.onExitComplete}
           onInteractOutside={props.onInteractOutside}
           onPointerDownOutside={props.onPointerDownOutside}
-          padding={props.padding}
           placement={props.placement}
+          sideOffset={props.sideOffset}
           transition={props.transition}
         >
           {props.children}

package/src/Combobox/ComboboxInput.tsx

@@ -2,8 +2,10 @@ import { React, Slot } from "@lattice-ui/core";
 import { useComboboxContext } from "./context";
 import type { ComboboxInputProps } from "./types";
 
+const UserInputService = game.GetService("UserInputService");
+
 function toTextBox(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("TextBox")) {
+  if (!instance?.IsA("TextBox")) {
     return undefined;
   }
 
@@ -43,6 +45,10 @@ export function ComboboxInput(props: ComboboxInputProps) {
         return;
       }
 
+      if (UserInputService.GetFocusedTextBox() !== textBox) {
+        return;
+      }
+
       if (disabled || readOnly) {
         if (textBox.Text !== lastInputValueRef.current) {
           textBox.Text = lastInputValueRef.current;

package/src/Combobox/ComboboxItem.tsx

@@ -7,10 +7,10 @@ let nextItemOrder = 0;
 
 export function ComboboxItem(props: ComboboxItemProps) {
   const comboboxContext = useComboboxContext();
-  const itemQueryMatch = comboboxContext.filterFn(props.textValue ?? props.value, comboboxContext.inputValue);
+  const textValue = props.textValue ?? props.value;
+  const itemQueryMatch = comboboxContext.filterFn(textValue, comboboxContext.queryValue);
   const disabled = comboboxContext.disabled || props.disabled === true;
   const interactionDisabled = disabled || !itemQueryMatch;
-  const textValue = props.textValue ?? props.value;
 
   const disabledRef = React.useRef(disabled);
   const textValueRef = React.useRef(textValue);

package/src/Combobox/ComboboxRoot.tsx

@@ -39,6 +39,7 @@ export function ComboboxRoot(props: ComboboxProps) {
     defaultValue: props.defaultInputValue ?? "",
     onChange: props.onInputValueChange,
   });
+  const [visibleQueryValue, setVisibleQueryValue] = React.useState(inputValue);
 
   const disabled = props.disabled === true;
   const readOnly = props.readOnly === true;
@@ -52,6 +53,7 @@ export function ComboboxRoot(props: ComboboxProps) {
 
   const itemEntriesRef = React.useRef<Array<ComboboxItemRegistration>>([]);
   const itemTextCacheRef = React.useRef<Record<string, string>>({});
+  const programmaticInputValueRef = React.useRef<string | undefined>();
   const [registryRevision, setRegistryRevision] = React.useState(0);
 
   const registerItem = React.useCallback((item: ComboboxItemRegistration) => {
@@ -90,6 +92,7 @@ export function ComboboxRoot(props: ComboboxProps) {
 
   const syncInputFromValue = React.useCallback(() => {
     const nextInputValue = value !== undefined ? (getItemText(value) ?? "") : "";
+    programmaticInputValueRef.current = nextInputValue;
     setInputValueState(nextInputValue);
   }, [getItemText, setInputValueState, value]);
 
@@ -111,12 +114,13 @@ export function ComboboxRoot(props: ComboboxProps) {
       }
 
       const selected = resolveOrderedItems().find((item) => item.value === nextValue);
-      if (selected && selected.getDisabled()) {
+      if (selected?.getDisabled()) {
         return;
       }
 
       setValueState(nextValue);
       const nextInputValue = getItemText(nextValue) ?? nextValue;
+      programmaticInputValueRef.current = nextInputValue;
       setInputValueState(nextInputValue);
     },
     [disabled, getItemText, resolveOrderedItems, setInputValueState, setValueState],
@@ -128,6 +132,16 @@ export function ComboboxRoot(props: ComboboxProps) {
         return;
       }
 
+      if (programmaticInputValueRef.current !== undefined && nextInputValue === programmaticInputValueRef.current) {
+        programmaticInputValueRef.current = undefined;
+        return;
+      }
+
+      programmaticInputValueRef.current = undefined;
+      setVisibleQueryValue((currentQueryValue) =>
+        currentQueryValue === nextInputValue ? currentQueryValue : nextInputValue,
+      );
+
       if (nextInputValue === inputValue) {
         return;
       }
@@ -160,7 +174,10 @@ export function ComboboxRoot(props: ComboboxProps) {
     }
 
     syncInputFromValue();
-  }, [open, syncInputFromValue, value]);
+    setVisibleQueryValue((currentQueryValue) => (currentQueryValue === inputValue ? currentQueryValue : inputValue));
+  }, [inputValue, open, syncInputFromValue, value]);
+
+  const queryValue = open ? visibleQueryValue : inputValue;
 
   const contextValue = React.useMemo(
     () => ({
@@ -169,6 +186,7 @@ export function ComboboxRoot(props: ComboboxProps) {
       value,
       setValue,
       inputValue,
+      queryValue,
       setInputValue,
       syncInputFromValue,
       disabled,
@@ -188,6 +206,7 @@ export function ComboboxRoot(props: ComboboxProps) {
       getItemText,
       inputValue,
       open,
+      queryValue,
       readOnly,
       registerItem,
       required,
@@ -197,6 +216,7 @@ export function ComboboxRoot(props: ComboboxProps) {
       setValue,
       syncInputFromValue,
       value,
+      visibleQueryValue,
     ],
   );
 

package/src/Combobox/ComboboxTrigger.tsx

@@ -3,7 +3,7 @@ import { useComboboxContext } from "./context";
 import type { ComboboxTriggerProps } from "./types";
 
 function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
+  if (!instance?.IsA("GuiObject")) {
     return undefined;
   }
 

package/src/Combobox/types.ts

@@ -23,6 +23,7 @@ export type ComboboxContextValue = {
   value?: string;
   setValue: ComboboxSetValue;
   inputValue: string;
+  queryValue: string;
   setInputValue: ComboboxSetInputValue;
   syncInputFromValue: () => void;
   disabled: boolean;
@@ -85,8 +86,9 @@ export type ComboboxContentProps = {
   asChild?: boolean;
   forceMount?: boolean;
   placement?: PopperPlacement;
-  offset?: Vector2;
-  padding?: number;
+  sideOffset?: number;
+  alignOffset?: number;
+  collisionPadding?: number;
   onPointerDownOutside?: (event: LayerInteractEvent) => void;
   onInteractOutside?: (event: LayerInteractEvent) => void;
   children?: React.ReactNode;