@dxos/react-ui-form 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-form",
-  "version": "0.8.4-main.422d1c7879",
+  "version": "0.8.4-main.4f23b4e393",
   "description": "Data components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -11,12 +11,21 @@
   "license": "MIT",
   "author": "DXOS.org",
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -31,26 +40,26 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "date-fns": "^3.6.0",
     "tabster": "^8.5.5",
-    "@dxos/async": "0.8.4-main.422d1c7879",
-    "@dxos/echo": "0.8.4-main.422d1c7879",
-    "@dxos/echo-atom": "0.8.4-main.422d1c7879",
-    "@dxos/echo-react": "0.8.4-main.422d1c7879",
-    "@dxos/invariant": "0.8.4-main.422d1c7879",
-    "@dxos/effect": "0.8.4-main.422d1c7879",
-    "@dxos/keys": "0.8.4-main.422d1c7879",
-    "@dxos/echo-db": "0.8.4-main.422d1c7879",
-    "@dxos/lit-ui": "0.8.4-main.422d1c7879",
-    "@dxos/log": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-components": "0.8.4-main.422d1c7879",
-    "@dxos/react-client": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-editor": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-list": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-search": "0.8.4-main.422d1c7879",
-    "@dxos/schema": "0.8.4-main.422d1c7879",
-    "@dxos/ui-editor": "0.8.4-main.422d1c7879",
-    "@dxos/util": "0.8.4-main.422d1c7879",
-    "@dxos/types": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-pickers": "0.8.4-main.422d1c7879"
+    "@dxos/echo": "0.8.4-main.4f23b4e393",
+    "@dxos/async": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-react": "0.8.4-main.4f23b4e393",
+    "@dxos/effect": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-atom": "0.8.4-main.4f23b4e393",
+    "@dxos/echo-db": "0.8.4-main.4f23b4e393",
+    "@dxos/invariant": "0.8.4-main.4f23b4e393",
+    "@dxos/keys": "0.8.4-main.4f23b4e393",
+    "@dxos/react-client": "0.8.4-main.4f23b4e393",
+    "@dxos/lit-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-components": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-editor": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-list": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-pickers": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-search": "0.8.4-main.4f23b4e393",
+    "@dxos/schema": "0.8.4-main.4f23b4e393",
+    "@dxos/types": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-editor": "0.8.4-main.4f23b4e393",
+    "@dxos/log": "0.8.4-main.4f23b4e393",
+    "@dxos/util": "0.8.4-main.4f23b4e393"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -59,20 +68,20 @@
     "fast-check": "^3.19.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.422d1c7879",
-    "@dxos/react-client": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui": "0.8.4-main.422d1c7879",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.422d1c7879",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879",
-    "@dxos/storybook-utils": "0.8.4-main.422d1c7879"
+    "vite": "^8.0.10",
+    "@dxos/random": "0.8.4-main.4f23b4e393",
+    "@dxos/react-client": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.4f23b4e393",
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393",
+    "@dxos/storybook-utils": "0.8.4-main.4f23b4e393"
   },
   "peerDependencies": {
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.422d1c7879",
-    "@dxos/ui-theme": "0.8.4-main.422d1c7879"
+    "@dxos/ui-theme": "0.8.4-main.4f23b4e393",
+    "@dxos/react-ui": "0.8.4-main.4f23b4e393"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FieldEditor/FieldEditor.stories.tsx

@@ -12,7 +12,8 @@ import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ProjectionModel, ViewModel, createEchoChangeCallback } from '@dxos/schema';
 import { Example } from '@dxos/schema/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { FIELD_EDITOR_DEBUG_SYMBOL, TestLayout } from '../testing';
 import { FieldEditor, type FieldEditorProps } from './FieldEditor';
 

package/src/components/FieldEditor/FieldEditor.tsx

@@ -16,7 +16,8 @@ import {
   getFormatSchema,
 } from '@dxos/schema';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { getFormProperties } from '../../util';
 import { Form, type FormFieldMap, type FormRootProps, SelectField, SelectOptionField } from '../Form';
 
@@ -151,7 +152,7 @@ export const FieldEditor = ({ readonly, projection, field, registry, view, onSav
   const handleSave = useCallback<NonNullable<FormRootProps<PropertyType>['onSave']>>(
     (props) => {
       if (view) {
-        Obj.change(view, () => {
+        Obj.update(view, () => {
           projection.setFieldProjection({ field, props });
         });
       } else {

package/src/components/Form/Form.stories.tsx

@@ -14,7 +14,8 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { Tooltip } from '@dxos/react-ui';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { TestLayout } from '../testing';
 import { type ExcludeId, Form, type FormRootProps, omitId } from './Form';
 

package/src/components/Form/Form.tsx

@@ -21,6 +21,8 @@ import {
 } from '@dxos/react-ui';
 import { composable, composableProps, mx, withColumn } from '@dxos/ui-theme';
 
+import { translationKey } from '#translations';
+
 import {
   type FormHandler,
   type FormHandlerProps,
@@ -28,7 +30,6 @@ import {
   useFormHandler,
   useKeyHandler,
 } from '../../hooks';
-import { translationKey } from '../../translations';
 import { FormFieldLabel, type FormFieldLabelProps, type FormFieldStateProps } from './FormFieldComponent';
 import {
   FormFieldSet as NaturalFormFieldSet,
@@ -265,7 +266,6 @@ const FormActions = ({ classNames }: FormActionsProps) => {
 
   return (
     <div
-      role='none'
       className={mx(withColumn.center(), 'grid grid-flow-col gap-form-gap auto-cols-fr py-form-padding', classNames)}
     >
       {onCancel && (
@@ -341,7 +341,7 @@ const FormSubmit = ({ classNames, label, icon, disabled }: FormSubmitProps) => {
   }
 
   return (
-    <div role='none' className={mx('flex w-full pt-form-padding', classNames)}>
+    <div className={mx('flex w-full pt-form-padding', classNames)}>
       <IconButton
         classNames='w-full'
         type='submit'

package/src/components/Form/FormField.tsx

@@ -23,7 +23,8 @@ import {
 import { useTranslation } from '@dxos/react-ui';
 import { type ProjectionModel } from '@dxos/schema';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { getRefProps } from '../../util';
 import {
   ArrayField,

package/src/components/Form/FormFieldComponent.tsx

@@ -80,7 +80,7 @@ export type FormFieldLabelProps = {
 export const FormFieldLabel = ({ label, error, readonly, asChild }: FormFieldLabelProps) => {
   const Label = readonly || asChild ? 'span' : Input.Label;
   return (
-    <div role='none' className='flex items-center justify-between'>
+    <div className='flex items-center justify-between'>
       <Label className={inputTextLabel}>{label}</Label>
       {error && (
         <Tooltip.Trigger asChild content={error} side='bottom'>
@@ -116,7 +116,7 @@ export const FormFieldWrapper = <T,>(props: FormFieldWrapperProps<T>) => {
   const str = String(value ?? '');
 
   return (
-    <div role='none' className='contents'>
+    <div className='contents'>
       <Input.Root validationValence={status}>
         {layout !== 'inline' && <FormFieldLabel error={error} readonly={readonly} label={label} />}
         {layout === 'static' ? <p>{str}</p> : children ? children({ value }) : null}
@@ -159,7 +159,7 @@ export class FormFieldErrorBoundary extends Component<FormFieldErrorBoundaryProp
     if (this.state.error) {
       return (
         <div className='flex gap-2 border border-rose-fill font-mono text-sm'>
-          <span className='bg-rose-fill text-surface-text px-1 font-thin'>ERROR</span>
+          <span className='bg-rose-fill text-base-foreground px-1 font-thin'>ERROR</span>
           {String(this.props.path?.join('.'))}
         </div>
       );

package/src/components/Form/fields/ArrayField.tsx

@@ -9,7 +9,8 @@ import React, { useCallback } from 'react';
 import { findNode, getArrayElementType, getDiscriminatedType, isDiscriminatedUnion, isNestedType } from '@dxos/effect';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 
-import { translationKey } from '../../../translations';
+import { translationKey } from '#translations';
+
 import { getFormProperties } from '../../../util';
 import { useFormValues } from '../Form';
 import { FormField, type FormFieldProps } from '../FormField';
@@ -77,14 +78,10 @@ export const ArrayField = ({
         <FormFieldLabel readonly={readonly} label={label} asChild />
       )}
 
-      <div role='none' className='flex flex-col gap-form-gap'>
+      <div className='flex flex-col gap-form-gap'>
         {values?.map((_, index) => {
           return (
-            <div
-              role='none'
-              key={index}
-              className='grid grid-cols-[1fr_min-content] gap-form-gap last:mb-form-gap items-center'
-            >
+            <div key={index} className='grid grid-cols-[1fr_min-content] gap-form-gap last:mb-form-gap items-center'>
               <FormField
                 autoFocus={index === values.length - 1}
                 type={elementType}
@@ -95,9 +92,9 @@ export const ArrayField = ({
               />
 
               {!readonly && layout !== 'static' && (
-                <div role='none' className='flex flex-col h-full justify-end'>
+                <div className='flex flex-col h-full justify-end'>
                   {/* NOTE: Aligns with center of last field if multi-field object. */}
-                  <div role='none' className='flex items-center h-[2rem]'>
+                  <div className='flex items-center h-[2rem]'>
                     <IconButton
                       icon='ph--x--regular'
                       iconOnly

package/src/components/Form/fields/GeoPointField.tsx

@@ -8,7 +8,8 @@ import { GeoLocation, type GeoPoint } from '@dxos/echo/internal';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { safeParseFloat } from '@dxos/util';
 
-import { translationKey } from '../../../translations';
+import { translationKey } from '#translations';
+
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 export const GeoPointField = ({
@@ -62,7 +63,7 @@ export const GeoPointField = ({
       {layout === 'static' ? (
         <LatLng {...value} />
       ) : (
-        <div role='none' className='grid grid-cols-2 gap-form-gap'>
+        <div className='grid grid-cols-2 gap-form-gap'>
           <div>
             <Input.Root>
               {layout !== 'inline' && <Input.Label>{t('latitude.label')}</Input.Label>}

package/src/components/Form/fields/MarkdownField.stories.tsx

@@ -5,6 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useMemo } from 'react';
+import { expect, userEvent } from 'storybook/test';
 
 import { Filter, Format, Obj, Ref } from '@dxos/echo';
 import { useQuery } from '@dxos/react-client/echo';
@@ -13,7 +14,8 @@ import { Panel } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Text } from '@dxos/schema';
 
-import { translations } from '../../../translations';
+import { translations } from '#translations';
+
 import { TestLayout } from '../../testing';
 import { Form } from '../Form';
 
@@ -125,6 +127,59 @@ export const StringBacked: Story = {
   render: () => <StringStory />,
 };
 
+// Regression test: keystrokes into a string-backed markdown field must not
+// blur the editor. Previously the EditorView was destroyed and recreated on
+// every change because `onChange` was a useTextEditor dep and form callbacks
+// are unstable across renders.
+export const StringBackedKeepsFocus: Story = {
+  render: () => (
+    <TestLayout>
+      <Form.Root schema={StringSchema} defaultValues={{ notes: '' }}>
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    </TestLayout>
+  ),
+  play: async ({ canvasElement }) => {
+    const waitFor = async <T,>(predicate: () => T | null | undefined, message: string): Promise<T> => {
+      for (let attempt = 0; attempt < 50; attempt++) {
+        const value = predicate();
+        if (value) {
+          return value;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      throw new Error(message);
+    };
+
+    const editorRoot = await waitFor(
+      () => canvasElement.querySelector<HTMLElement>('.cm-editor'),
+      'CodeMirror editor root (.cm-editor) not found',
+    );
+    const editorContent = editorRoot.querySelector<HTMLElement>('.cm-content')!;
+    await expect(editorContent).toBeVisible();
+
+    // Focus editor and wait for focus to settle inside the editor root.
+    editorContent.focus();
+    await waitFor(() => (editorRoot.contains(document.activeElement) ? true : null), 'Editor did not receive focus');
+
+    // Type several characters; focus must be preserved inside the editor root
+    // after every keystroke. Regression: previously the EditorView was
+    // destroyed and recreated on every change, which detached the focused
+    // contentDOM and blurred the input.
+    const phrase = 'hello world';
+    for (const ch of phrase) {
+      await userEvent.keyboard(ch);
+      await expect(editorRoot.contains(document.activeElement)).toBe(true);
+    }
+
+    await expect(editorContent).toHaveTextContent(phrase);
+  },
+};
+
 export const RefPopulated: Story = {
   render: () => <RefStory />,
   decorators: [

package/src/components/Form/fields/MarkdownField.tsx

@@ -13,7 +13,8 @@ import { Editor, useBasicMarkdownExtensions } from '@dxos/react-ui-editor';
 import { Text } from '@dxos/schema';
 import { createDataExtensions } from '@dxos/ui-editor';
 
-import { translationKey } from '../../../translations';
+import { translationKey } from '#translations';
+
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 const editorClassNames =

package/src/components/Form/fields/RefField.tsx

@@ -14,7 +14,8 @@ import { DxAnchor } from '@dxos/lit-ui/react';
 import { Button, Icon, Input, useTranslation } from '@dxos/react-ui';
 import { ParentLabelAnnotationId } from '@dxos/schema';
 
-import { translationKey } from '../../../translations';
+import { translationKey } from '#translations';
+
 import { ObjectPicker, type ObjectPickerContentProps, type RefOption } from '../../ObjectPicker';
 import { omitHiddenFormFields, omitId } from '../Form';
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
@@ -188,14 +189,14 @@ export const RefField = (props: RefFieldProps) => {
           <ObjectPicker.Root open={open} onOpenChange={setOpen}>
             <ObjectPicker.Trigger asChild classNames='p-0'>
               {item ? (
-                <div role='none' className='flex gap-form-gap w-full'>
+                <div className='flex gap-form-gap w-full'>
                   <Input.Root key={item.id}>
                     <Input.TextInput value={item.label} readOnly classNames='w-full' />
                   </Input.Root>
                 </div>
               ) : (
                 <Button classNames='w-full text-start gap-form-gap'>
-                  <div role='none' className='grow overflow-hidden'>
+                  <div className='grow overflow-hidden'>
                     <span className='truncate text-description'>{placeholder ?? t('ref-field.placeholder')}</span>
                   </div>
                   <Icon size={3} icon='ph--caret-down--bold' />

package/src/components/Form/fields/SelectOptionField.stories.tsx

@@ -9,7 +9,8 @@ import React, { useState } from 'react';
 import { SelectOption } from '@dxos/echo/internal';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../../translations';
+import { translations } from '#translations';
+
 import { TestLayout } from '../../testing';
 import { Form } from '../Form';
 import { SelectOptionField } from './SelectOptionField';

package/src/components/Form/fields/SelectOptionField.tsx

@@ -9,9 +9,10 @@ import { PublicKey } from '@dxos/keys';
 import { type ChromaticPalette, IconButton, Input, Tag, useTranslation } from '@dxos/react-ui';
 import { List } from '@dxos/react-ui-list';
 import { HuePicker } from '@dxos/react-ui-pickers';
-import { hues, osTranslations, subtleHover } from '@dxos/ui-theme';
+import { hues, osTranslations } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../../translations';
 import { type FormFieldComponentProps, FormFieldLabel } from '../FormFieldComponent';
 
 export const SelectOptionField = ({
@@ -119,7 +120,7 @@ export const SelectOptionField = ({
   return (
     <Input.Root validationValence={status}>
       <FormFieldLabel error={error} readonly={readonly} label={label} />
-      <div role='none'>
+      <div>
         {options && (
           <List.Root
             items={options}
@@ -134,7 +135,7 @@ export const SelectOptionField = ({
                     <List.Item
                       role='button'
                       item={item}
-                      classNames={[subtleHover, 'flex flex-col cursor-pointer rounded-xs']}
+                      classNames='flex flex-col cursor-pointer rounded-xs dx-hover'
                       aria-expanded={selected === item.id}
                     >
                       <div className='flex items-center'>
@@ -146,7 +147,7 @@ export const SelectOptionField = ({
                         <IconButton
                           iconOnly
                           variant='ghost'
-                          label={t(selected === item.id ? 'collapse label' : 'expand label', { ns: osTranslations })}
+                          label={t(selected === item.id ? 'collapse.label' : 'expand.label', { ns: osTranslations })}
                           icon={selected === item.id ? 'ph--caret-down--regular' : 'ph--caret-right--regular'}
                           onClick={() => handleClick(item.id)}
                         />

package/src/components/ObjectForm/ObjectForm.tsx

@@ -11,7 +11,8 @@ import { invariant } from '@dxos/invariant';
 import { HuePicker } from '@dxos/react-ui-pickers';
 import { isNonNullable } from '@dxos/util';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { Form, type FormFieldMap, omitId } from '../Form';
 
 export type ObjectFormProps = {
@@ -52,7 +53,7 @@ export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
     invariant(Type.isObjectSchema(schema));
     const newObject = db.add(Obj.make(schema, values));
     if (Obj.instanceOf(Tag.Tag, newObject)) {
-      Obj.change(object, (object) => {
+      Obj.update(object, (object) => {
         Obj.getMeta(object).tags = [...(Obj.getMeta(object).tags ?? []), Obj.getDXN(newObject).toString()];
       });
     }
@@ -67,10 +68,10 @@ export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
 
       const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
 
-      // Handle tags separately using Obj.change.
+      // Handle tags separately using Obj.update.
       const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === 'tags');
       if (hasTagsChange) {
-        Obj.change(object, (object) => {
+        Obj.update(object, (object) => {
           Obj.getMeta(object).tags = tags?.map((tag: Ref.Ref<Tag.Tag>) => tag.dxn.toString()) ?? [];
         });
       }
@@ -78,7 +79,7 @@ export const ObjectForm = ({ object, schema }: ObjectFormProps) => {
       // Handle other property changes.
       const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== 'tags');
       if (nonTagPaths.length > 0) {
-        Obj.change(object, () => {
+        Obj.update(object, () => {
           for (const path of nonTagPaths) {
             const parts = splitJsonPath(path);
             const value = Obj.getValue(values, parts);

package/src/components/ObjectPicker/ObjectPicker.stories.tsx

@@ -7,16 +7,17 @@ import * as Schema from 'effect/Schema';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 
-import { Obj } from '@dxos/echo';
+import { Filter, Obj } from '@dxos/echo';
 import { random } from '@dxos/random';
-import { Filter, useQuery } from '@dxos/react-client/echo';
+import { useQuery } from '@dxos/react-client/echo';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
 import { Button } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { Person } from '@dxos/types';
 import { osTranslations } from '@dxos/ui-theme';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { ObjectPicker } from './ObjectPicker';
 
 random.seed(1);
@@ -64,7 +65,9 @@ const DefaultStory = () => {
   const handleCreateCallback = useCallback(
     (values: any) => {
       console.log('[on create]', values);
-      if (!space) return;
+      if (!space) {
+        return;
+      }
       const newPerson = space.db.add(Obj.make(Person.Person, values));
       mockHandleCreate(values);
       return newPerson;
@@ -73,7 +76,7 @@ const DefaultStory = () => {
   );
 
   return (
-    <div role='none' className='w-96'>
+    <div className='w-96'>
       <ObjectPicker.Root open={isOpen} onOpenChange={setIsOpen}>
         <ObjectPicker.Trigger asChild>
           <Button variant='primary' data-testid='trigger' classNames='w-full'>

package/src/components/ObjectPicker/ObjectPicker.tsx

@@ -6,9 +6,11 @@ import type * as Schema from 'effect/Schema';
 import React, { type KeyboardEvent, forwardRef, useCallback, useState } from 'react';
 
 import { type Palette, Popover, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Combobox, useSearchListInput, useSearchListResults } from '@dxos/react-ui-search';
+import { Combobox } from '@dxos/react-ui-list';
+import { useSearchListResults } from '@dxos/react-ui-search';
+
+import { translationKey } from '#translations';
 
-import { translationKey } from '../../translations';
 import { Form } from '../Form';
 import { type FormFieldMap } from '../Form/FormFieldComponent';
 
@@ -57,7 +59,7 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
     const [showForm, setShowForm] = useState(false);
     const [formInitialValue, setFormInitialValue] = useState<string>('');
 
-    const { results, handleSearch } = useSearchListResults({
+    const { results, query, handleSearch } = useSearchListResults({
       items: options,
     });
 
@@ -98,7 +100,7 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
 
     if (showForm && createSchema) {
       return (
-        <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+        <Combobox.Content {...props} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
           <Popover.Viewport>
             <Form.Root
               testId='create-referenced-object-form'
@@ -122,8 +124,13 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
     }
 
     return (
-      <Combobox.Content {...props} onSearch={handleSearch} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
-        <Combobox.Input placeholder={t('ref-field-combobox-input.placeholder')} autoFocus />
+      <Combobox.Content {...props} onKeyDownCapture={handleKeyDown} ref={forwardedRef}>
+        <Combobox.Input
+          placeholder={t('ref-field-combobox-input.placeholder')}
+          autoFocus
+          value={query}
+          onValueChange={handleSearch}
+        />
         <Combobox.List>
           {results.map((option) => (
             <Combobox.Item
@@ -137,10 +144,11 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
           ))}
           {createSchema && onCreate && (
             <CreateItem
+              query={query}
               createOptionLabel={createOptionLabel}
               createOptionIcon={createOptionIcon ?? 'ph--plus--regular'}
-              onCreateItemSelect={(query: string) => {
-                setFormInitialValue(query);
+              onCreateItemSelect={(currentQuery: string) => {
+                setFormInitialValue(currentQuery);
                 setShowForm(true);
               }}
             />
@@ -153,16 +161,17 @@ const ObjectPickerContent = forwardRef<HTMLDivElement, ObjectPickerContentProps>
 );
 
 const CreateItem = ({
+  query,
   createOptionLabel,
   createOptionIcon,
   onCreateItemSelect,
 }: {
+  query: string;
   createOptionLabel?: [string, { ns: string }];
   createOptionIcon: string;
   onCreateItemSelect: (query: string) => void;
 }) => {
   const { t } = useTranslation(translationKey);
-  const { query } = useSearchListInput();
 
   const label = createOptionLabel
     ? t(createOptionLabel[0], { ns: createOptionLabel[1].ns, text: query })

package/src/components/ObjectProperties/ObjectProperties.stories.tsx

@@ -16,7 +16,8 @@ import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { FactoryAnnotation, type FactoryFn } from '@dxos/schema';
 import { Pipeline } from '@dxos/types';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
+
 import { OBJECT_PROPERTIES_DEBUG_SYMBOL } from '../testing';
 import { ObjectProperties } from './ObjectProperties';