Sortable | Reorderable drag-and-drop lists | Widget library

Since the height will just be perceived as CSS, you can try:

$event is not the same type as SortEvent, as you need. $event will always contain a lot of key-value pairs, unless you are using with anything other than legacy elements.

react-table sets up an onClick handler on the element by this expression: {...column.getHeaderProps(column.getSortByToggleProps())}

If you put your own onClick handler before it, it will be overridden. If you put it behind it, it will override the handler from react-table, which will break the sorting.

So you need to trigger the react-table handler manually in your override like this:

In the accessibility portion of the documentation, you can find keyboard navigation details for the data grid. Arrow keys are used to navigate between cells and space (among other things) is used to navigate to the next scrollable page. You can find the handling of those keys in the handleCellNavigationKeyDown function in useGridKeyboardNavigation.ts.

When a key down event happens for one of those special navigation characters, MUI calls event.preventDefault() which in your case prevents the key from having its default effect within the input. You can prevent that by using event.stopPropagation() within the TextField onKeyDown such that the event never reaches the grid's keyboard navigation handling code. Keep in mind though that by doing this, you may be harming some of the keyboard accessibility features.

Here's a modified version of your sandbox demonstrating this: https://codesandbox.io/s/cant-add-space-to-muis-textfield-33joy?file=/src/App.js:863-902.

You seem to be using Windows cmd to run the command, and hence you are getting the error.

The command:

record_path is the path to the record, so you should specify the full path

The sorted column CSS rule has the following selector:

Some browsers won't allow the focus to be moved to an element if it's not an interactive element. In the blue box, you have an

To get around it, add tabindex="-1" to the

This will allow the focus to be moved to a non-interactive element via JS but won't allow the user to tab to it.

Now, having said that, in general you should not move the user's focus unless there's a really good reason for it. You mentioned you wanted to do it for a

"better experience from a usability point of view"

As a keyboard only user, I would find that a worse experience. If I'm a new user to the app and I wanted to explore the LHS menu to see what's available, I would tab to the menu, press enter or space to select the menu, then see what appears on the right. I'd then want to tab to the next menu item and select it to see what appears, but you moved my focus over to the right so now I have to shift+tab all the way back up to the menu. If I were using a sip-and-puff device or another assistive technology instead of a keyboard, that's going to be a lot of effort.

So your intention is good but it might cause a lot of difficulty for some users. That's why I recommend not moving the user's focus unless there's a really, really good reason for it.

Of course the opposite argument can be made. If the focus is not moved then the sip-and-puff user will have to navigate all the way over to the right side to interact with what appears.

You have to do some research to see what might benefit the most users without adversely affecting other users.

You can set a comparator