While we were working on the ASRouter devtools, we wanted to automatically expand some text boxes from input to textarea, because we have a lot of fields that could have short values like `null` but could also have long JSON values. But changing tags wouldn't be ideal, as focus and undo history would be lost. So instead we wanted to start with a textarea but just make it look like a regular input field by giving it a smaller size and `resize: none`. However, when we actually tried doing that in practice, it also caused the undo history to be lost! The size doesn't matter, but hiding or showing the resizer seems to cause the element to be reset in some ways. Beyond the undo history being lost, the only other clue I found is that the textarea's contents (the div that is normally hidden) seem to be recreated. If you select that hidden div element in the inspector and then show/hide the resizer, the inspector's cursor will move up to the textarea, which is usually a sign that the element you had selected no longer exists. I double checked this by saving references to the DOM nodes. They show up as Restricted, but you can still check that by using "Use in Console" and checking `temp1 === temp2`. If you create a reference before and after messing with `resize` and compare them you'll see that they point to different things. I made an easy test case: (paste in urlbar) ``` data:text/html;utf8,<html><body style="width:fit-content"><textarea style="display:block" cols="30" placeholder="Type something here..."></textarea><label style="float:right"><input type="checkbox" onclick="this.parentElement.previousElementSibling.style.resize=this.checked ? 'both' : 'none'" checked />...then uncheck this box </label></body></html> ```
Bug 1922141 Comment 0 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
While we were working on the ASRouter devtools, we wanted to automatically expand some text boxes from input to textarea, because we have a lot of fields that could have short values like `null` but could also have long JSON values. But changing tags wouldn't be ideal, as focus and undo history would be lost. So instead we wanted to start with a textarea but just make it look like a regular input field by giving it a smaller size and `resize: none`. However, when we actually tried doing that in practice, it also caused the undo history to be lost! The size doesn't matter, but hiding or showing the resizer seems to cause the element to be reset in some ways. Beyond the undo history being lost, the only other clue I found is that the textarea's contents (the div that is normally hidden) seem to be recreated. If you select that hidden div element in the inspector and then show/hide the resizer, the inspector's cursor will move up to the textarea, which is usually a sign that the element you had selected no longer exists. I double checked this by saving references to the DOM nodes. They show up as Restricted, but you can still check that by using "Use in Console" and checking `temp1 === temp2`. If you create a reference before and after messing with `resize` and compare them you'll see that they point to different things. I made an easy test case: (paste in urlbar) ``` data:text/html;utf8,<html><body style="width:fit-content"><textarea style="display:block" cols="30" placeholder="Type something here..."></textarea><label style="float:right"><input type="checkbox" onclick="this.parentElement.previousElementSibling.style.resize=this.checked ? 'both' : 'none'" checked />...then uncheck this box </label></body></html> ``` Also, changing from `resize: horizontal` to `resize: vertical` also causes the history to be lost, even though the resizer didn't visually change.