@lattice-ui/combobox 0.3.2 → 0.4.1

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/combobox@0.4.1 build C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\combobox
+> rbxtsc -p tsconfig.json
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/combobox@0.4.1 typecheck C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\combobox
+> tsc -p tsconfig.typecheck.json
+

package/out/Combobox/ComboboxContent.luau

@@ -3,7 +3,6 @@ local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
-local RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
 local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
 local DismissableLayer = _layer.DismissableLayer
 local Presence = _layer.Presence
@@ -18,7 +17,7 @@ end
 local function ComboboxContentImpl(props)
 	local comboboxContext = useComboboxContext()
 	local popper = usePopper({
-		anchorRef = comboboxContext.triggerRef,
+		anchorRef = comboboxContext.anchorRef,
 		contentRef = comboboxContext.contentRef,
 		placement = props.placement,
 		offset = props.offset,
@@ -50,17 +49,12 @@ local function ComboboxContentImpl(props)
 	}, props.children))
 	return React.createElement(DismissableLayer, {
 		enabled = props.enabled,
+		insideRefs = { comboboxContext.triggerRef, comboboxContext.inputRef },
 		modal = false,
 		onDismiss = props.onDismiss,
-		onEscapeKeyDown = props.onEscapeKeyDown,
 		onInteractOutside = props.onInteractOutside,
 		onPointerDownOutside = props.onPointerDownOutside,
-	}, React.createElement(RovingFocusGroup, {
-		active = props.enabled,
-		autoFocus = "first",
-		loop = comboboxContext.loop,
-		orientation = "vertical",
-	}, contentNode))
+	}, contentNode)
 end
 local function ComboboxContent(props)
 	local comboboxContext = useComboboxContext()
@@ -78,7 +72,6 @@ local function ComboboxContent(props)
 			enabled = open,
 			offset = props.offset,
 			onDismiss = handleDismiss,
-			onEscapeKeyDown = props.onEscapeKeyDown,
 			onInteractOutside = props.onInteractOutside,
 			onPointerDownOutside = props.onPointerDownOutside,
 			padding = props.padding,
@@ -95,7 +88,6 @@ local function ComboboxContent(props)
 				enabled = state.isPresent,
 				offset = props.offset,
 				onDismiss = handleDismiss,
-				onEscapeKeyDown = props.onEscapeKeyDown,
 				onInteractOutside = props.onInteractOutside,
 				onPointerDownOutside = props.onPointerDownOutside,
 				padding = props.padding,

package/out/Combobox/ComboboxInput.luau

@@ -15,9 +15,21 @@ local function ComboboxInput(props)
 	local disabled = comboboxContext.disabled or props.disabled == true
 	local readOnly = comboboxContext.readOnly or props.readOnly == true
 	local setInputRef = React.useCallback(function(instance)
-		comboboxContext.inputRef.current = toTextBox(instance)
-	end, { comboboxContext.inputRef })
+		local previousInput = comboboxContext.inputRef.current
+		local nextInput = toTextBox(instance)
+		comboboxContext.inputRef.current = nextInput
+		if nextInput then
+			comboboxContext.anchorRef.current = nextInput
+			return nil
+		end
+		if comboboxContext.anchorRef.current == previousInput then
+			comboboxContext.anchorRef.current = comboboxContext.triggerRef.current
+		end
+	end, { comboboxContext.anchorRef, comboboxContext.inputRef, comboboxContext.triggerRef })
 	local handleTextChanged = React.useCallback(function(textBox)
+		if textBox.Text == comboboxContext.inputValue then
+			return nil
+		end
 		if disabled or readOnly then
 			if textBox.Text ~= comboboxContext.inputValue then
 				textBox.Text = comboboxContext.inputValue
@@ -26,19 +38,6 @@ local function ComboboxInput(props)
 		end
 		comboboxContext.setInputValue(textBox.Text)
 	end, { comboboxContext, disabled, readOnly })
-	local handleFocusLost = React.useCallback(function()
-		comboboxContext.setOpen(false)
-		comboboxContext.syncInputFromValue()
-	end, { comboboxContext })
-	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
-		if disabled then
-			return nil
-		end
-		local keyCode = inputObject.KeyCode
-		if keyCode == Enum.KeyCode.Down or keyCode == Enum.KeyCode.Up then
-			comboboxContext.setOpen(true)
-		end
-	end, { comboboxContext, disabled })
 	local _object = {
 		Active = not disabled,
 		ClearTextOnFocus = false,
@@ -55,10 +54,6 @@ local function ComboboxInput(props)
 	_object.Change = {
 		Text = handleTextChanged,
 	}
-	_object.Event = {
-		FocusLost = handleFocusLost,
-		InputBegan = handleInputBegan,
-	}
 	_object.ref = setInputRef
 	local sharedProps = _object
 	if props.asChild then

package/out/Combobox/ComboboxItem.luau

@@ -3,25 +3,18 @@ local TS = _G[script]
 local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
 local React = _core.React
 local Slot = _core.Slot
-local RovingFocusItem = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusItem
 local useComboboxContext = TS.import(script, script.Parent, "context").useComboboxContext
 local nextItemId = 0
 local nextItemOrder = 0
-local function toGuiObject(instance)
-	if not instance or not instance:IsA("GuiObject") then
-		return nil
-	end
-	return instance
-end
 local function ComboboxItem(props)
 	local comboboxContext = useComboboxContext()
-	local itemRef = React.useRef()
 	local _condition = props.textValue
 	if _condition == nil then
 		_condition = props.value
 	end
 	local itemQueryMatch = comboboxContext.filterFn(_condition, comboboxContext.inputValue)
-	local disabled = comboboxContext.disabled or props.disabled == true or not itemQueryMatch
+	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
@@ -50,9 +43,6 @@ local function ComboboxItem(props)
 			id = itemIdRef.current,
 			value = props.value,
 			order = itemOrderRef.current,
-			getNode = function()
-				return itemRef.current
-			end,
 			getDisabled = function()
 				return disabledRef.current
 			end,
@@ -61,18 +51,15 @@ local function ComboboxItem(props)
 			end,
 		})
 	end, { comboboxContext, props.value })
-	local setItemRef = React.useCallback(function(instance)
-		itemRef.current = toGuiObject(instance)
-	end, {})
 	local handleSelect = React.useCallback(function()
-		if disabled then
+		if interactionDisabled then
 			return nil
 		end
 		comboboxContext.setValue(props.value)
 		comboboxContext.setOpen(false)
-	end, { comboboxContext, disabled, props.value })
+	end, { comboboxContext, interactionDisabled, props.value })
 	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
-		if disabled then
+		if interactionDisabled then
 			return nil
 		end
 		local keyCode = inputObject.KeyCode
@@ -81,7 +68,7 @@ local function ComboboxItem(props)
 		end
 		comboboxContext.setValue(props.value)
 		comboboxContext.setOpen(false)
-	end, { comboboxContext, disabled, props.value })
+	end, { comboboxContext, interactionDisabled, props.value })
 	local eventHandlers = React.useMemo(function()
 		return {
 			Activated = handleSelect,
@@ -93,38 +80,30 @@ local function ComboboxItem(props)
 		if not child then
 			error("[ComboboxItem] `asChild` requires a child element.")
 		end
-		return React.createElement(RovingFocusItem, {
-			asChild = true,
-			disabled = disabled,
-		}, React.createElement(Slot, {
-			Active = not disabled,
+		return React.createElement(Slot, {
+			Active = not interactionDisabled,
 			Event = eventHandlers,
-			Selectable = not disabled,
+			Selectable = false,
 			Visible = itemQueryMatch,
-			ref = setItemRef,
-		}, child))
+		}, child)
 	end
-	return React.createElement(RovingFocusItem, {
-		asChild = true,
-		disabled = disabled,
-	}, React.createElement("textbutton", {
-		Active = not disabled,
+	return React.createElement("textbutton", {
+		Active = not interactionDisabled,
 		AutoButtonColor = false,
 		BackgroundColor3 = Color3.fromRGB(47, 53, 68),
 		BorderSizePixel = 0,
 		Event = eventHandlers,
-		Selectable = not disabled,
+		Selectable = false,
 		Size = UDim2.fromOffset(220, 32),
 		Text = textValue,
-		TextColor3 = if disabled then Color3.fromRGB(134, 141, 156) else Color3.fromRGB(234, 239, 247),
+		TextColor3 = if interactionDisabled then Color3.fromRGB(134, 141, 156) else Color3.fromRGB(234, 239, 247),
 		TextSize = 15,
 		TextXAlignment = Enum.TextXAlignment.Left,
 		Visible = itemQueryMatch,
-		ref = setItemRef,
 	}, React.createElement("uipadding", {
 		PaddingLeft = UDim.new(0, 10),
 		PaddingRight = UDim.new(0, 10),
-	}), props.children))
+	}), props.children)
 end
 return {
 	ComboboxItem = ComboboxItem,

package/out/Combobox/ComboboxRoot.luau

@@ -6,7 +6,6 @@ local useControllableState = _core.useControllableState
 local ComboboxContextProvider = TS.import(script, script.Parent, "context").ComboboxContextProvider
 local _logic = TS.import(script, script.Parent, "logic")
 local defaultComboboxFilter = _logic.defaultComboboxFilter
-local resolveComboboxInputValue = _logic.resolveComboboxInputValue
 local resolveForcedComboboxValue = _logic.resolveForcedComboboxValue
 local function getOrderedItems(items)
 	local _array = {}
@@ -78,21 +77,19 @@ local function ComboboxRoot(props)
 	local disabled = props.disabled == true
 	local readOnly = props.readOnly == true
 	local required = props.required == true
-	local _condition_2 = props.loop
-	if _condition_2 == nil then
-		_condition_2 = true
-	end
-	local loop = _condition_2
 	local filterFn = props.filterFn or defaultComboboxFilter
+	local anchorRef = React.useRef()
 	local triggerRef = React.useRef()
 	local inputRef = React.useRef()
 	local contentRef = React.useRef()
 	local itemEntriesRef = React.useRef({})
+	local itemTextCacheRef = React.useRef({})
 	local registryRevision, setRegistryRevision = React.useState(0)
 	local registerItem = React.useCallback(function(item)
 		local _current = itemEntriesRef.current
 		local _item = item
 		table.insert(_current, _item)
+		itemTextCacheRef.current[item.value] = item.getTextValue()
 		setRegistryRevision(function(revision)
 			return revision + 1
 		end)
@@ -137,25 +134,33 @@ local function ComboboxRoot(props)
 		end
 		-- ▲ ReadonlyArray.find ▲
 		local selected = _result
-		local _result_1 = selected
-		if _result_1 ~= nil then
-			_result_1 = _result_1.getTextValue()
+		if selected then
+			local textValue = selected.getTextValue()
+			itemTextCacheRef.current[candidateValue] = textValue
+			return textValue
 		end
-		return _result_1
+		return itemTextCacheRef.current[candidateValue]
 	end, { resolveOrderedItems })
 	local syncInputFromValue = React.useCallback(function()
-		local nextInputValue = resolveComboboxInputValue(value, toOptions(resolveOrderedItems()), "")
+		local _result
+		if value ~= nil then
+			local _condition_2 = getItemText(value)
+			if _condition_2 == nil then
+				_condition_2 = ""
+			end
+			_result = _condition_2
+		else
+			_result = ""
+		end
+		local nextInputValue = _result
 		setInputValueState(nextInputValue)
-	end, { resolveOrderedItems, setInputValueState, value })
+	end, { getItemText, setInputValueState, value })
 	local setOpen = React.useCallback(function(nextOpen)
 		if disabled and nextOpen then
 			return nil
 		end
 		setOpenState(nextOpen)
-		if not nextOpen then
-			syncInputFromValue()
-		end
-	end, { disabled, setOpenState, syncInputFromValue })
+	end, { disabled, setOpenState })
 	local setValue = React.useCallback(function(nextValue)
 		if disabled then
 			return nil
@@ -178,45 +183,36 @@ local function ComboboxRoot(props)
 			return nil
 		end
 		setValueState(nextValue)
-		local _condition_3 = getItemText(nextValue)
-		if _condition_3 == nil then
-			_condition_3 = nextValue
+		local _condition_2 = getItemText(nextValue)
+		if _condition_2 == nil then
+			_condition_2 = nextValue
 		end
-		local nextInputValue = _condition_3
+		local nextInputValue = _condition_2
 		setInputValueState(nextInputValue)
 	end, { disabled, getItemText, resolveOrderedItems, setInputValueState, setValueState })
 	local setInputValue = React.useCallback(function(nextInputValue)
 		if disabled or readOnly then
 			return nil
 		end
+		if nextInputValue == inputValue then
+			return nil
+		end
 		setInputValueState(nextInputValue)
 		setOpenState(true)
-	end, { disabled, readOnly, setInputValueState, setOpenState })
-	local getFilteredItems = React.useCallback(function()
-		local query = inputValue
-		local _exp = resolveOrderedItems()
-		-- ▼ ReadonlyArray.filter ▼
-		local _newValue = {}
-		local _callback = function(item)
-			return filterFn(item.getTextValue(), query)
-		end
-		local _length = 0
-		for _k, _v in _exp do
-			if _callback(_v, _k - 1, _exp) == true then
-				_length += 1
-				_newValue[_length] = _v
-			end
-		end
-		-- ▲ ReadonlyArray.filter ▲
-		return _newValue
-	end, { filterFn, inputValue, resolveOrderedItems })
+	end, { disabled, inputValue, readOnly, setInputValueState, setOpenState })
 	React.useEffect(function()
+		if not open then
+			return nil
+		end
 		local orderedItems = resolveOrderedItems()
+		if #orderedItems == 0 then
+			return nil
+		end
 		local nextValue = resolveForcedComboboxValue(value, toOptions(orderedItems))
-		if nextValue ~= value then
+		if nextValue ~= nil and nextValue ~= value then
 			setValueState(nextValue)
 		end
-	end, { registryRevision, resolveOrderedItems, setValueState, value })
+	end, { open, registryRevision, resolveOrderedItems, setValueState, value })
 	React.useEffect(function()
 		if open then
 			return nil
@@ -235,17 +231,15 @@ local function ComboboxRoot(props)
 			disabled = disabled,
 			readOnly = readOnly,
 			required = required,
-			loop = loop,
 			filterFn = filterFn,
+			anchorRef = anchorRef,
 			triggerRef = triggerRef,
 			inputRef = inputRef,
 			contentRef = contentRef,
 			registerItem = registerItem,
-			getOrderedItems = resolveOrderedItems,
-			getFilteredItems = getFilteredItems,
 			getItemText = getItemText,
 		}
-	end, { disabled, filterFn, getFilteredItems, getItemText, inputValue, loop, open, readOnly, registerItem, required, resolveOrderedItems, setInputValue, setOpen, setValue, syncInputFromValue, value })
+	end, { disabled, filterFn, getItemText, inputValue, open, readOnly, registerItem, required, resolveOrderedItems, setInputValue, setOpen, setValue, syncInputFromValue, value })
 	return React.createElement(ComboboxContextProvider, {
 		value = contextValue,
 	}, props.children)

package/out/Combobox/ComboboxTrigger.luau

@@ -14,8 +14,20 @@ local function ComboboxTrigger(props)
 	local comboboxContext = useComboboxContext()
 	local disabled = comboboxContext.disabled or props.disabled == true
 	local setTriggerRef = React.useCallback(function(instance)
-		comboboxContext.triggerRef.current = toGuiObject(instance)
-	end, { comboboxContext.triggerRef })
+		local previousTrigger = comboboxContext.triggerRef.current
+		local nextTrigger = toGuiObject(instance)
+		comboboxContext.triggerRef.current = nextTrigger
+		if comboboxContext.inputRef.current then
+			return nil
+		end
+		if nextTrigger then
+			comboboxContext.anchorRef.current = nextTrigger
+			return nil
+		end
+		if comboboxContext.anchorRef.current == previousTrigger then
+			comboboxContext.anchorRef.current = nil
+		end
+	end, { comboboxContext.anchorRef, comboboxContext.inputRef, comboboxContext.triggerRef })
 	local handleActivated = React.useCallback(function()
 		if disabled then
 			return nil
@@ -29,10 +41,6 @@ local function ComboboxTrigger(props)
 		local keyCode = inputObject.KeyCode
 		if keyCode == Enum.KeyCode.Return or keyCode == Enum.KeyCode.Space then
 			comboboxContext.setOpen(not comboboxContext.open)
-			return nil
-		end
-		if keyCode == Enum.KeyCode.Down or keyCode == Enum.KeyCode.Up then
-			comboboxContext.setOpen(true)
 		end
 	end, { comboboxContext, disabled })
 	local eventHandlers = React.useMemo(function()
@@ -49,7 +57,7 @@ local function ComboboxTrigger(props)
 		return React.createElement(Slot, {
 			Active = not disabled,
 			Event = eventHandlers,
-			Selectable = not disabled,
+			Selectable = false,
 			ref = setTriggerRef,
 		}, child)
 	end
@@ -59,7 +67,7 @@ local function ComboboxTrigger(props)
 		BackgroundColor3 = Color3.fromRGB(41, 48, 63),
 		BorderSizePixel = 0,
 		Event = eventHandlers,
-		Selectable = not disabled,
+		Selectable = false,
 		Size = UDim2.fromOffset(220, 36),
 		Text = "Combobox",
 		TextColor3 = if disabled then Color3.fromRGB(140, 148, 164) else Color3.fromRGB(235, 241, 248),

package/out/Combobox/types.d.ts

@@ -9,7 +9,6 @@ export type ComboboxItemRegistration = {
     id: number;
     value: string;
     order: number;
-    getNode: () => GuiObject | undefined;
     getDisabled: () => boolean;
     getTextValue: () => string;
 };
@@ -24,14 +23,12 @@ export type ComboboxContextValue = {
     disabled: boolean;
     readOnly: boolean;
     required: boolean;
-    loop: boolean;
     filterFn: ComboboxFilterFn;
+    anchorRef: React.MutableRefObject<GuiObject | undefined>;
     triggerRef: React.MutableRefObject<GuiObject | undefined>;
     inputRef: React.MutableRefObject<TextBox | undefined>;
     contentRef: React.MutableRefObject<GuiObject | undefined>;
     registerItem: (item: ComboboxItemRegistration) => () => void;
-    getOrderedItems: () => Array<ComboboxItemRegistration>;
-    getFilteredItems: () => Array<ComboboxItemRegistration>;
     getItemText: (value: string) => string | undefined;
 };
 export type ComboboxProps = {
@@ -47,7 +44,6 @@ export type ComboboxProps = {
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
-    loop?: boolean;
     filterFn?: ComboboxFilterFn;
     children?: React.ReactNode;
 };
@@ -79,7 +75,6 @@ export type ComboboxContentProps = {
     placement?: PopperPlacement;
     offset?: Vector2;
     padding?: number;
-    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
     onPointerDownOutside?: (event: LayerInteractEvent) => void;
     onInteractOutside?: (event: LayerInteractEvent) => void;
     children?: React.ReactNode;

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@lattice-ui/combobox",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
   "dependencies": {
-    "@lattice-ui/core": "0.3.2",
-    "@lattice-ui/layer": "0.3.2",
-    "@lattice-ui/focus": "0.3.2",
-    "@lattice-ui/popper": "0.3.2"
+    "@lattice-ui/core": "0.4.1",
+    "@lattice-ui/layer": "0.4.1",
+    "@lattice-ui/popper": "0.4.1"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",

package/src/Combobox/ComboboxContent.tsx

@@ -1,5 +1,4 @@
 import { React, Slot } from "@lattice-ui/core";
-import { RovingFocusGroup } from "@lattice-ui/focus";
 import { DismissableLayer, Presence } from "@lattice-ui/layer";
 import { usePopper } from "@lattice-ui/popper";
 import { useComboboxContext } from "./context";
@@ -13,7 +12,7 @@ type ComboboxContentImplProps = {
   placement?: ComboboxContentProps["placement"];
   offset?: ComboboxContentProps["offset"];
   padding?: ComboboxContentProps["padding"];
-} & Pick<ComboboxContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
+} & Pick<ComboboxContentProps, "children" | "onInteractOutside" | "onPointerDownOutside">;
 
 function toGuiObject(instance: Instance | undefined) {
   if (!instance || !instance.IsA("GuiObject")) {
@@ -27,7 +26,7 @@ function ComboboxContentImpl(props: ComboboxContentImplProps) {
   const comboboxContext = useComboboxContext();
 
   const popper = usePopper({
-    anchorRef: comboboxContext.triggerRef,
+    anchorRef: comboboxContext.anchorRef,
     contentRef: comboboxContext.contentRef,
     placement: props.placement,
     offset: props.offset,
@@ -72,15 +71,13 @@ function ComboboxContentImpl(props: ComboboxContentImplProps) {
   return (
     <DismissableLayer
       enabled={props.enabled}
+      insideRefs={[comboboxContext.triggerRef, comboboxContext.inputRef]}
       modal={false}
       onDismiss={props.onDismiss}
-      onEscapeKeyDown={props.onEscapeKeyDown}
       onInteractOutside={props.onInteractOutside}
       onPointerDownOutside={props.onPointerDownOutside}
     >
-      <RovingFocusGroup active={props.enabled} autoFocus="first" loop={comboboxContext.loop} orientation="vertical">
-        {contentNode}
-      </RovingFocusGroup>
+      {contentNode}
     </DismissableLayer>
   );
 }
@@ -105,7 +102,6 @@ export function ComboboxContent(props: ComboboxContentProps) {
         enabled={open}
         offset={props.offset}
         onDismiss={handleDismiss}
-        onEscapeKeyDown={props.onEscapeKeyDown}
         onInteractOutside={props.onInteractOutside}
         onPointerDownOutside={props.onPointerDownOutside}
         padding={props.padding}
@@ -127,7 +123,6 @@ export function ComboboxContent(props: ComboboxContentProps) {
           enabled={state.isPresent}
           offset={props.offset}
           onDismiss={handleDismiss}
-          onEscapeKeyDown={props.onEscapeKeyDown}
           onInteractOutside={props.onInteractOutside}
           onPointerDownOutside={props.onPointerDownOutside}
           padding={props.padding}

package/src/Combobox/ComboboxInput.tsx

@@ -17,13 +17,29 @@ export function ComboboxInput(props: ComboboxInputProps) {
 
   const setInputRef = React.useCallback(
     (instance: Instance | undefined) => {
-      comboboxContext.inputRef.current = toTextBox(instance);
+      const previousInput = comboboxContext.inputRef.current;
+      const nextInput = toTextBox(instance);
+
+      comboboxContext.inputRef.current = nextInput;
+
+      if (nextInput) {
+        comboboxContext.anchorRef.current = nextInput;
+        return;
+      }
+
+      if (comboboxContext.anchorRef.current === previousInput) {
+        comboboxContext.anchorRef.current = comboboxContext.triggerRef.current;
+      }
     },
-    [comboboxContext.inputRef],
+    [comboboxContext.anchorRef, comboboxContext.inputRef, comboboxContext.triggerRef],
   );
 
   const handleTextChanged = React.useCallback(
     (textBox: TextBox) => {
+      if (textBox.Text === comboboxContext.inputValue) {
+        return;
+      }
+
       if (disabled || readOnly) {
         if (textBox.Text !== comboboxContext.inputValue) {
           textBox.Text = comboboxContext.inputValue;
@@ -37,25 +53,6 @@ export function ComboboxInput(props: ComboboxInputProps) {
     [comboboxContext, disabled, readOnly],
   );
 
-  const handleFocusLost = React.useCallback(() => {
-    comboboxContext.setOpen(false);
-    comboboxContext.syncInputFromValue();
-  }, [comboboxContext]);
-
-  const handleInputBegan = React.useCallback(
-    (_rbx: GuiObject, inputObject: InputObject) => {
-      if (disabled) {
-        return;
-      }
-
-      const keyCode = inputObject.KeyCode;
-      if (keyCode === Enum.KeyCode.Down || keyCode === Enum.KeyCode.Up) {
-        comboboxContext.setOpen(true);
-      }
-    },
-    [comboboxContext, disabled],
-  );
-
   const sharedProps = {
     Active: !disabled,
     ClearTextOnFocus: false,
@@ -66,10 +63,6 @@ export function ComboboxInput(props: ComboboxInputProps) {
     Change: {
       Text: handleTextChanged,
     },
-    Event: {
-      FocusLost: handleFocusLost,
-      InputBegan: handleInputBegan,
-    },
     ref: setInputRef,
   };
 

package/src/Combobox/ComboboxItem.tsx

@@ -1,25 +1,15 @@
 import { React, Slot } from "@lattice-ui/core";
-import { RovingFocusItem } from "@lattice-ui/focus";
 import { useComboboxContext } from "./context";
 import type { ComboboxItemProps } from "./types";
 
 let nextItemId = 0;
 let nextItemOrder = 0;
 
-function toGuiObject(instance: Instance | undefined) {
-  if (!instance || !instance.IsA("GuiObject")) {
-    return undefined;
-  }
-
-  return instance;
-}
-
 export function ComboboxItem(props: ComboboxItemProps) {
   const comboboxContext = useComboboxContext();
-  const itemRef = React.useRef<GuiObject>();
-
   const itemQueryMatch = comboboxContext.filterFn(props.textValue ?? props.value, comboboxContext.inputValue);
-  const disabled = comboboxContext.disabled || props.disabled === true || !itemQueryMatch;
+  const disabled = comboboxContext.disabled || props.disabled === true;
+  const interactionDisabled = disabled || !itemQueryMatch;
   const textValue = props.textValue ?? props.value;
 
   const disabledRef = React.useRef(disabled);
@@ -50,28 +40,23 @@ export function ComboboxItem(props: ComboboxItemProps) {
       id: itemIdRef.current,
       value: props.value,
       order: itemOrderRef.current,
-      getNode: () => itemRef.current,
       getDisabled: () => disabledRef.current,
       getTextValue: () => textValueRef.current,
     });
   }, [comboboxContext, props.value]);
 
-  const setItemRef = React.useCallback((instance: Instance | undefined) => {
-    itemRef.current = toGuiObject(instance);
-  }, []);
-
   const handleSelect = React.useCallback(() => {
-    if (disabled) {
+    if (interactionDisabled) {
       return;
     }
 
     comboboxContext.setValue(props.value);
     comboboxContext.setOpen(false);
-  }, [comboboxContext, disabled, props.value]);
+  }, [comboboxContext, interactionDisabled, props.value]);
 
   const handleInputBegan = React.useCallback(
     (_rbx: GuiObject, inputObject: InputObject) => {
-      if (disabled) {
+      if (interactionDisabled) {
         return;
       }
 
@@ -83,7 +68,7 @@ export function ComboboxItem(props: ComboboxItemProps) {
       comboboxContext.setValue(props.value);
       comboboxContext.setOpen(false);
     },
-    [comboboxContext, disabled, props.value],
+    [comboboxContext, interactionDisabled, props.value],
   );
 
   const eventHandlers = React.useMemo(
@@ -101,34 +86,29 @@ export function ComboboxItem(props: ComboboxItemProps) {
     }
 
     return (
-      <RovingFocusItem asChild disabled={disabled}>
-        <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled} Visible={itemQueryMatch} ref={setItemRef}>
-          {child}
-        </Slot>
-      </RovingFocusItem>
+      <Slot Active={!interactionDisabled} Event={eventHandlers} Selectable={false} Visible={itemQueryMatch}>
+        {child}
+      </Slot>
     );
   }
 
   return (
-    <RovingFocusItem asChild disabled={disabled}>
-      <textbutton
-        Active={!disabled}
-        AutoButtonColor={false}
-        BackgroundColor3={Color3.fromRGB(47, 53, 68)}
-        BorderSizePixel={0}
-        Event={eventHandlers}
-        Selectable={!disabled}
-        Size={UDim2.fromOffset(220, 32)}
-        Text={textValue}
-        TextColor3={disabled ? Color3.fromRGB(134, 141, 156) : Color3.fromRGB(234, 239, 247)}
-        TextSize={15}
-        TextXAlignment={Enum.TextXAlignment.Left}
-        Visible={itemQueryMatch}
-        ref={setItemRef}
-      >
-        <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
-        {props.children}
-      </textbutton>
-    </RovingFocusItem>
+    <textbutton
+      Active={!interactionDisabled}
+      AutoButtonColor={false}
+      BackgroundColor3={Color3.fromRGB(47, 53, 68)}
+      BorderSizePixel={0}
+      Event={eventHandlers}
+      Selectable={false}
+      Size={UDim2.fromOffset(220, 32)}
+      Text={textValue}
+      TextColor3={interactionDisabled ? Color3.fromRGB(134, 141, 156) : Color3.fromRGB(234, 239, 247)}
+      TextSize={15}
+      TextXAlignment={Enum.TextXAlignment.Left}
+      Visible={itemQueryMatch}
+    >
+      <uipadding PaddingLeft={new UDim(0, 10)} PaddingRight={new UDim(0, 10)} />
+      {props.children}
+    </textbutton>
   );
 }

package/src/Combobox/ComboboxRoot.tsx

@@ -1,11 +1,6 @@
 import { React, useControllableState } from "@lattice-ui/core";
 import { ComboboxContextProvider } from "./context";
-import {
-  type ComboboxOption,
-  defaultComboboxFilter,
-  resolveComboboxInputValue,
-  resolveForcedComboboxValue,
-} from "./logic";
+import { type ComboboxOption, defaultComboboxFilter, resolveForcedComboboxValue } from "./logic";
 import type { ComboboxItemRegistration, ComboboxProps } from "./types";
 
 function getOrderedItems(items: Array<ComboboxItemRegistration>) {
@@ -48,18 +43,20 @@ export function ComboboxRoot(props: ComboboxProps) {
   const disabled = props.disabled === true;
   const readOnly = props.readOnly === true;
   const required = props.required === true;
-  const loop = props.loop ?? true;
   const filterFn = props.filterFn ?? defaultComboboxFilter;
 
+  const anchorRef = React.useRef<GuiObject>();
   const triggerRef = React.useRef<GuiObject>();
   const inputRef = React.useRef<TextBox>();
   const contentRef = React.useRef<GuiObject>();
 
   const itemEntriesRef = React.useRef<Array<ComboboxItemRegistration>>([]);
+  const itemTextCacheRef = React.useRef<Record<string, string>>({});
   const [registryRevision, setRegistryRevision] = React.useState(0);
 
   const registerItem = React.useCallback((item: ComboboxItemRegistration) => {
     itemEntriesRef.current.push(item);
+    itemTextCacheRef.current[item.value] = item.getTextValue();
     setRegistryRevision((revision) => revision + 1);
 
     return () => {
@@ -78,15 +75,21 @@ export function ComboboxRoot(props: ComboboxProps) {
   const getItemText = React.useCallback(
     (candidateValue: string) => {
       const selected = resolveOrderedItems().find((item) => item.value === candidateValue);
-      return selected?.getTextValue();
+      if (selected) {
+        const textValue = selected.getTextValue();
+        itemTextCacheRef.current[candidateValue] = textValue;
+        return textValue;
+      }
+
+      return itemTextCacheRef.current[candidateValue];
     },
     [resolveOrderedItems],
   );
 
   const syncInputFromValue = React.useCallback(() => {
-    const nextInputValue = resolveComboboxInputValue(value, toOptions(resolveOrderedItems()), "");
+    const nextInputValue = value !== undefined ? (getItemText(value) ?? "") : "";
     setInputValueState(nextInputValue);
-  }, [resolveOrderedItems, setInputValueState, value]);
+  }, [getItemText, setInputValueState, value]);
 
   const setOpen = React.useCallback(
     (nextOpen: boolean) => {
@@ -95,12 +98,8 @@ export function ComboboxRoot(props: ComboboxProps) {
       }
 
       setOpenState(nextOpen);
-
-      if (!nextOpen) {
-        syncInputFromValue();
-      }
     },
-    [disabled, setOpenState, syncInputFromValue],
+    [disabled, setOpenState],
   );
 
   const setValue = React.useCallback(
@@ -127,24 +126,31 @@ export function ComboboxRoot(props: ComboboxProps) {
         return;
       }
 
+      if (nextInputValue === inputValue) {
+        return;
+      }
+
       setInputValueState(nextInputValue);
       setOpenState(true);
     },
-    [disabled, readOnly, setInputValueState, setOpenState],
+    [disabled, inputValue, readOnly, setInputValueState, setOpenState],
   );
 
-  const getFilteredItems = React.useCallback(() => {
-    const query = inputValue;
-    return resolveOrderedItems().filter((item) => filterFn(item.getTextValue(), query));
-  }, [filterFn, inputValue, resolveOrderedItems]);
-
   React.useEffect(() => {
+    if (!open) {
+      return;
+    }
+
     const orderedItems = resolveOrderedItems();
+    if (orderedItems.size() === 0) {
+      return;
+    }
+
     const nextValue = resolveForcedComboboxValue(value, toOptions(orderedItems));
-    if (nextValue !== value) {
+    if (nextValue !== undefined && nextValue !== value) {
       setValueState(nextValue);
     }
-  }, [registryRevision, resolveOrderedItems, setValueState, value]);
+  }, [open, registryRevision, resolveOrderedItems, setValueState, value]);
 
   React.useEffect(() => {
     if (open) {
@@ -166,23 +172,19 @@ export function ComboboxRoot(props: ComboboxProps) {
       disabled,
       readOnly,
       required,
-      loop,
       filterFn,
+      anchorRef,
       triggerRef,
       inputRef,
       contentRef,
       registerItem,
-      getOrderedItems: resolveOrderedItems,
-      getFilteredItems,
       getItemText,
     }),
     [
       disabled,
       filterFn,
-      getFilteredItems,
       getItemText,
       inputValue,
-      loop,
       open,
       readOnly,
       registerItem,

package/src/Combobox/ComboboxTrigger.tsx

@@ -16,9 +16,25 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
 
   const setTriggerRef = React.useCallback(
     (instance: Instance | undefined) => {
-      comboboxContext.triggerRef.current = toGuiObject(instance);
+      const previousTrigger = comboboxContext.triggerRef.current;
+      const nextTrigger = toGuiObject(instance);
+
+      comboboxContext.triggerRef.current = nextTrigger;
+
+      if (comboboxContext.inputRef.current) {
+        return;
+      }
+
+      if (nextTrigger) {
+        comboboxContext.anchorRef.current = nextTrigger;
+        return;
+      }
+
+      if (comboboxContext.anchorRef.current === previousTrigger) {
+        comboboxContext.anchorRef.current = undefined;
+      }
     },
-    [comboboxContext.triggerRef],
+    [comboboxContext.anchorRef, comboboxContext.inputRef, comboboxContext.triggerRef],
   );
 
   const handleActivated = React.useCallback(() => {
@@ -38,11 +54,6 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
       const keyCode = inputObject.KeyCode;
       if (keyCode === Enum.KeyCode.Return || keyCode === Enum.KeyCode.Space) {
         comboboxContext.setOpen(!comboboxContext.open);
-        return;
-      }
-
-      if (keyCode === Enum.KeyCode.Down || keyCode === Enum.KeyCode.Up) {
-        comboboxContext.setOpen(true);
       }
     },
     [comboboxContext, disabled],
@@ -63,7 +74,7 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
     }
 
     return (
-      <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled} ref={setTriggerRef}>
+      <Slot Active={!disabled} Event={eventHandlers} Selectable={false} ref={setTriggerRef}>
         {child}
       </Slot>
     );
@@ -76,7 +87,7 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
       BackgroundColor3={Color3.fromRGB(41, 48, 63)}
       BorderSizePixel={0}
       Event={eventHandlers}
-      Selectable={!disabled}
+      Selectable={false}
       Size={UDim2.fromOffset(220, 36)}
       Text="Combobox"
       TextColor3={disabled ? Color3.fromRGB(140, 148, 164) : Color3.fromRGB(235, 241, 248)}

package/src/Combobox/types.ts

@@ -12,7 +12,6 @@ export type ComboboxItemRegistration = {
   id: number;
   value: string;
   order: number;
-  getNode: () => GuiObject | undefined;
   getDisabled: () => boolean;
   getTextValue: () => string;
 };
@@ -28,14 +27,12 @@ export type ComboboxContextValue = {
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
-  loop: boolean;
   filterFn: ComboboxFilterFn;
+  anchorRef: React.MutableRefObject<GuiObject | undefined>;
   triggerRef: React.MutableRefObject<GuiObject | undefined>;
   inputRef: React.MutableRefObject<TextBox | undefined>;
   contentRef: React.MutableRefObject<GuiObject | undefined>;
   registerItem: (item: ComboboxItemRegistration) => () => void;
-  getOrderedItems: () => Array<ComboboxItemRegistration>;
-  getFilteredItems: () => Array<ComboboxItemRegistration>;
   getItemText: (value: string) => string | undefined;
 };
 
@@ -52,7 +49,6 @@ export type ComboboxProps = {
   disabled?: boolean;
   readOnly?: boolean;
   required?: boolean;
-  loop?: boolean;
   filterFn?: ComboboxFilterFn;
   children?: React.ReactNode;
 };
@@ -89,7 +85,6 @@ export type ComboboxContentProps = {
   placement?: PopperPlacement;
   offset?: Vector2;
   padding?: number;
-  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
   onPointerDownOutside?: (event: LayerInteractEvent) => void;
   onInteractOutside?: (event: LayerInteractEvent) => void;
   children?: React.ReactNode;