Get help on Discord

How to disable autocomplete for an input field in a document using Sanity's official component library

8 replies
Last updated: Apr 13, 2023
Hello all 👋 Apologies if this has been asked an answered. I couldn't find any conversations via search.
We'd like to disable autocomplete for an input field in our doc, but not sure how to enable in the schema. Example with html in vid below.
Apr 12, 2023, 5:57 PM
I think the only way to do this interesting enough is to create a custom field component using sanitys official component lib https://www.sanity.io/ui/docs/primitive/text-input in here you can set the change event to return nothing. should block autocomplete I think.
Apr 12, 2023, 6:38 PM
Apr 12, 2023, 6:39 PM
how to set the component in your scheme ^
Apr 12, 2023, 6:39 PM
ah, ok. Was hoping it was an option I was missing 🙂 Thank you!
Apr 12, 2023, 6:40 PM
yeah im not seeing in options or validation where that would be set.
Apr 12, 2023, 6:40 PM
What does the schema look like for this field?
Apr 12, 2023, 7:07 PM
user M

    {
      title: "Headline",
      name: "headline",
      type: "string",
      validation: (Rule) => Rule.required(),
    },

Apr 13, 2023, 1:02 AM
user J
user M
User @ Sanity support recommended this approach, seems to work as designed:
import { useEffect, useRef } from "react";
import { InputProps, isStringInputProps } from "sanity";
/**
 * Disable autocomplete in all string inputs
 * If necessary, customize to target other form inputs
 *
 * Used in `sanity.config.ts` as:
 *
 * ```ts
 * form: {
 *   components: {
 *     input: FormInput
 *   }
 * }
 *
*/
export function FormInput(props: InputProps) {
/**
* Pass a reference to the input
* @see
https://react.dev/learn/manipulating-the-dom-with-refs */
const ref = useRef<HTMLInputElement>(null);
props.elementProps.ref = ref;
useEffect(() => {
/**
* After rendering, update the input's 
autocomplete
attribute * NOTE: this assertion will match both 
string
and 
text
typed fields */
if (
ref.current
&& ref.current.autocomplete != "off"
&& isStringInputProps(props)
) {
ref.current.autocomplete = "off"
}
}, [props, ref.current?.autocomplete])
return props.renderDefault(props);
}```
Apr 13, 2023, 3:16 AM

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?