Disable "click to activate" in block content editor

7 replies
Last updated: Aug 6, 2022
Hi everyone! Is there a way to configure the block content editor to avoid the “click to activate” feature? Switching back and forth between multiple pages with block content editors for the content makes the “click to activate” a bit tedious.
AI Update

I understand your frustration with the "click to activate" feature in the block content editor! Unfortunately, there isn't a built-in configuration option to disable the "click to activate" behavior in Sanity's Portable Text Editor. This activation step is part of how the editor manages focus and prevents accidental edits.

However, here are some approaches that might help:

Workarounds and Considerations

1. Keyboard Navigation The fastest way to work with multiple block editors is using keyboard shortcuts:

  • Press Tab to move between fields
  • Once focused, you can immediately start typing without clicking
  • Use Shift + Tab to navigate backwards

2. Custom Input Component If this is a significant workflow issue, you could create a custom input component that modifies the Portable Text Editor's behavior. This would involve:

  • Using the components.input property in your schema
  • Wrapping or extending the default Portable Text input
  • Potentially auto-focusing the editor on mount

However, this approach requires careful consideration as it could lead to:

  • Unintended focus stealing when scrolling through documents
  • Accessibility issues for keyboard users
  • Conflicts with Sanity's real-time collaboration features

3. Consider the Design Intent The "click to activate" pattern exists to:

  • Prevent accidental edits while scrolling
  • Clearly indicate which editor has focus (important for real-time collaboration)
  • Improve performance with many rich text fields on one page

Example Custom Input (Advanced)

If you want to explore a custom solution, here's a starting point:

import {PortableTextInput} from 'sanity'

const AutoFocusPortableText = (props) => {
  return <PortableTextInput {...props} />
  // You'd need to add custom focus logic here
}

// In your schema
{
  name: 'content',
  type: 'array',
  of: [{type: 'block'}],
  components: {
    input: AutoFocusPortableText
  }
}

Keep in mind that modifying focus behavior can create usability issues, so test thoroughly with your editorial team before implementing any custom solution.

If this is a common pain point for your team, consider sharing your use case in the Sanity Community Slack or creating a feature request on GitHub—the team is always looking for feedback to improve the editing experience!

Show original thread
7 replies
Good question.. I would like to know too
Come to think of it, I don't think I've caught in the read yet why it's like that to begin with.
Yeah, I’d like to know how to change this as well
You can't currently change this behavior, unfortunately. As I recall, it has something to do with handling focus/presence in the Studio but I could be wrong! I will pass this feedback along to the team.
Oh that makes a lot of sense. Nobody has wanted to play with me collaboratively in my project yet so I forgot about the bit of magic.
Thanks for the answer Racheal. So it probably has to do with handling multiple people editing on the same document at once? That’s a valid concern and something I haven’t thought much about how Sanity handles. But in general when working on setting up lots of content at once, being able to avoid this click would be nice, so would be interesting to hear what you guys can figure out 🙂
user M
Maybe it'd be useful to change this behavior to work a bit like a multithreading lock? E.g.: disable the input when someone else is editing (or give a warning). This way you have the most friendly behaviour when no one else is editing. In a lot of our projects, that will be most of the time.

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.

Was this answer helpful?