user-select: none causing inputs within TableHeader to not work

[viktorrenkema]

I'm implementing a wysiwyg table using the Table, TableHeader, Cell, Column etc from react-aria-components. One of the issues I have is that while I got cells to be editable (albeit with a bunch of focus issues), my within the header elements don't focus when clicking into it.

I traced it to the disableTextSelection function in react-aria/utils, which briefly inserts user-select: none on the th element. I understand under some conditions text selection is unwanted, but this seems like behaviour that one should be able to opt-out of?

I know usePress allows allowTextSelectionOnPress, but I don't think i can access the underlying usePress used in Column or TableHeader?

Any thoughts how best to handle this, or if I'm missing a prop or smth.

[snowystinger]

I don't think using the actual components for the wysiwyg is a great idea. Usually wysiwygs have an action when you click on an element, or you need to add other controls into/around the element that aren't compatible with the roles of the target, or you need to drag elements around that otherwise can't be dragged.

I think you're fighting the way that a table should work vs how a wysiwyg works. I get that it's convenient to use the actual components, but I think they are just too different.

That said, we have work going on right now to support textfields and other editable things in tables. It should be coming soon.

[viktorrenkema]

Thanks, I appreciate it, I'll likely revisit the implementation then. When you mention 'i get that its convenient to use the actual components', what do you mean exactly? That while you discourage using

etc, there are still other utils (e.g. hooks) from react-aria that you would deem better to use?

[snowystinger]

o, I just meant convenient in that they'd already be styled correctly and have the structure you want, but I think the behaviours are different enough that it's an enticing pitfall