The invalid keyword tags are rendered using a HTML string. It's possible to use React elements with the attribute suppressContentEditableWarning, but that will require a refactor of the cursor position calculation, including how suggestions are added to the query, as that was coded for a single text <input>. I'd like to leave this for a future PR so we can have time to discuss on the next feature to the search input and how that can be developed. The current additions are well isolated, and if it doesn't work out, the components can easily be switched back to using a single <input>
Initial implementation informs of the invalid keyword using the title attribute. Future implementations may show quick-fix actions, but that will need some extra planning (previous item on refactoring)
I'm planning on a PR to split out the functions in web/src/search/helpers.tsx, the file is getting a bit long and might cause unnecessary conflicts on future code updates
I tried out Draft.js but couldn't find my way around getting it to render correctly with our styling, and get it to work correctly in a single line (also using plug-ins). But now with the contentEditable rendering and working correctly, maybe we can revisit Draft.js for 3.12
While updating the regex I noticed that RegExr is using CodeMirror for its styled single line input. CodeMirror can also be an option for our use case
Updates:
Dec/12/2019: Investigating usage of CodeMirror as a replacement to ContentEditableInput
