Input element value reverts when setting empty string and changing type

Question

When setting an input element's type to hidden, and it's value to an empty string, it seems to revert to a previous non-empty value. Can someone please explain why the input value reverts in console log instances 2 and 6 below?

var el   = document.getElementById('input');
el.type  = 'text';
el.value = '';
console.log('1', el.value);
el.type  = 'hidden';
console.log('2', el.value);

el.type  = 'text';
el.value = 'hello';
console.log('3', el.value);
el.type  = 'hidden';
console.log('4', el.value);

el.type  = 'text';
el.value = '';
console.log('5', el.value);
el.type  = 'hidden';
console.log('6', el.value);

<input id="input" type="hidden" value="test">

Answer 1

Admittedly a bit odd ... I found this w3c doc that might offer an explanation:

When an input element's type attribute changes state, the user agent must run the following steps:

1. If the previous state of the element's type attribute put the value IDL attribute in the value mode, and the element's value is not the empty string, and the new state of the element's type attribute puts the value IDL attribute in either the default mode or the default/on mode, then set the element's value content attribute to the element's value.

2. Otherwise, if the previous state of the element's type attribute put the value IDL attribute in any mode other than the value mode, and the new state of the element's type attribute puts the value IDL attribute in the value mode, then set the value of the element to the value of the value content attribute, if there is one, or the empty string otherwise, and then set the control's dirty value flag to false.

3. Update the element's rendering and behavior to the new state's.

4. Invoke the value sanitization algorithm, if one is defined for the type attribute's new state.

If I read it correctly, a type change will indeed fall back to the previous input value before type change if the new value is empty.

let inputHidden = document.getElementById('inputHidden');

console.log('1. hidden-text-hidden')

inputHidden.type = 'text';
inputHidden.value = '';
console.log('| text:', inputHidden.value, ' | att value:', inputHidden.getAttribute('value'), ' | type:', inputHidden.type);

inputHidden.type = 'hidden';
console.log('| hidden:', inputHidden.value, ' | att value:', inputHidden.getAttribute('value'), ' | type:', inputHidden.type);

console.log('\n 2. text-hidden-text')

let inputText = document.getElementById('inputText');

inputText.type = 'hidden';
inputText.value = 'hiddenVal';
console.log('| text:', inputText.value, ' | att value:', inputText.getAttribute('value'), ' | type:', inputText.type);

inputText.type = 'text';
inputText.value = '';
console.log('| text:', inputText.value, ' | att value:', inputText.getAttribute('value'), ' | type:', inputText.type);

<input id="inputHidden" type="hidden" value="hiddenAttValue">
<input id="inputText" type="text" value="textAttValue">