EditableAutocompleteField

EditableAutocompleteField wraps AutocompleteField in the editable pattern. In read mode the autocomplete is rendered in a disabled, dimmed state. Clicking the edit icon enables it so the user can search for and select a new value. Optionally, new records can be created inline through a built-in form popover. On save the selected value is persisted via a PATCH/PUT request.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | Yes | — | Field name sent as the key in the update payload. | | value | any \| any[] | No | — | Currently selected value or array of values (when multiple is true). | | updatePath | string | Yes | — | API endpoint path used to persist the change. | | apiBaseUrl | string | Yes | — | Base URL used for both search requests and the update request. | | searchPath | string | Yes | — | API path for the autocomplete search (e.g. "/v1/products/search"). | | label | string | No | — | Label shown above the field. | | description | string | No | — | Helper text shown below the label. | | multiple | boolean | No | false | When true, allows selecting multiple items. | | placeholder | string | No | "Escriba para buscar..." | Placeholder text inside the search input. | | useAuthToken | boolean | No | false | When true, search and update requests include the authorization token. | | searchParam | string | No | — | Query parameter name used for the search term. | | noResultsText | string | No | "No results found" | Text shown when the search returns no results. | | searchingText | string | No | "Searching..." | Text shown while the search request is in flight. | | itemLabelKey | string | No | "name" | Object key used as the display label for each result item. | | itemDescriptionKey | string | No | — | Object key used as the secondary description for each result item. | | itemImageKey | string | No | — | Object key used for an image URL displayed beside each result item. | | itemLabelStyle | React.CSSProperties | No | — | Style for the label text inside each result item. | | itemDescriptionStyle | React.CSSProperties | No | — | Style for the description text inside each result item. | | itemImageStyle | React.CSSProperties | No | — | Style for the image inside each result item. | | allowCreate | boolean | No | false | When true, shows a button to create a new record inline. | | formFields | Field[] | No | [] | Field definitions for the inline create form. | | formTitle | string | No | "Crear nuevo registro" | Title of the inline create form. | | formButtonText | string | No | — | Label for the create form's submit button. | | formButtonTitle | string | No | "Crear nuevo" | Tooltip/title for the create button. | | createPath | string | No | — | API path used to submit the inline create form. | | createButtonType | "solid" \| "clear" \| "outline" | No | "solid" | Style of the create trigger button. | | createButtonSize | "sm" \| "md" \| "lg" | No | "sm" | Size of the create trigger button. | | createButtonColor | string | No | — | Custom color for the create button. | | createButtonTitle | string | No | — | Tooltip for the create button. | | createButtonIcon | string | No | "add" | Icon name for the create button. | | formWidth | number \| string | No | 500 | Width of the inline create form popover. | | onCreateSuccess | (newRecord: any) => void | No | — | Called after a new record is successfully created inline. | | onCreateError | (error: any) => void | No | — | Called when inline record creation fails. | | onEditStart | () => void | No | — | Called when edit mode begins. | | onEditSuccess | (updatedValue: any, newFormData: any) => void | No | — | Called after successful save. | | onEditError | (error: any) => void | No | — | Called on API error; value is reverted. | | onEditCancel | () => void | No | — | Called when the user cancels; value is reverted. | | editIcon | string | No | "pencil" | Icon name for the edit button. | | saveIcon | string | No | "check" | Icon name for the save button. | | cancelIcon | string | No | "close" | Icon name for the cancel button. | | containerStyle | React.CSSProperties | No | — | Style for the outermost wrapper. | | labelStyle | React.CSSProperties | No | — | Style for the <label> element. | | descriptionStyle | React.CSSProperties | No | — | Style for the description text. | | popoverStyle | React.CSSProperties | No | — | Style for the autocomplete results popover. |

Usage

Basic

import React, { useState } from 'react';
import EditableAutocompleteField from '@/components/editable-fields/EditableAutocompleteField';

export default function Example() {
  const [category, setCategory] = useState(null);

  return (
    <EditableAutocompleteField
      label="Category"
      name="category_id"
      value={category}
      apiBaseUrl="https://api.example.com"
      searchPath="/v1/categories/search"
      updatePath="/v1/products/7"
      itemLabelKey="name"
      useAuthToken
      onEditSuccess={(updated) => setCategory(updated)}
    />
  );
}

Multi-select with inline record creation

<EditableAutocompleteField
  label="Tags"
  name="tag_ids"
  value={tags}
  multiple
  apiBaseUrl="https://api.example.com"
  searchPath="/v1/tags/search"
  updatePath="/v1/articles/12"
  itemLabelKey="name"
  allowCreate
  createPath="/v1/tags"
  formTitle="New Tag"
  formFields={[{ type: 'text', name: 'name', label: 'Tag name' }]}
  useAuthToken
  onEditSuccess={(updated) => setTags(updated)}
/>