Impossible to enforce max character length?

[DaltheCow]

I somewhat understand the issues related how the react-contenteditable has to prevent rerenders in certain scenarios (or something like that from 161. Couldn't say if this is related to that per se but anyways...

I'm trying to enforce a max text length on my title field content editable, doing something like this inside handleChange
setTitle(e?.currentTarget?.innerHTML.slice(0, 300));

It doesn't stop the the text from rolling past 300 characters so I added a hacky forceUpdate() call after calling setTitle

const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);

...inside handleChange
{
   setTitle(e?.currentTarget?.innerHTML.slice(0, 300));
   forceUpdate();
}

And this sort of works. But of course it is an awful practice and leads to bugs. It was more of just a test.

But without the forceUpdate the content editable doesn't enforce the max length while typing. It does however clip the text when i move the mouse in and out of hovering the content editable. I assume this is all related to the content editable preventing rerenders.

Just wondering if there are any work arounds at all to enforce a max text length. I don't think this is remotely possible but an alternative I'd be happy with is turning all the characters past 300 red. I think that sounds far more impossible though!! Thanks for any input, even if it is just saying max length this isn't possible.

[DaltheCow]

Current solution is to just add in a twitter style counter (-(num characters over limit) shows up next to the text when you type too many