fix(core): update fit-text input to native field sizing

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/core/.visual/toolbar.dark.png

@@ -53,6 +53,16 @@
 --width: fit-content;
 }
 
+:host([fit-text]) {
+--max-width: fit-content;
+--width: fit-content;
+
+ ::slotted(input),
+ ::slotted(select) {
+field-sizing: content;
+ }
+}
+
 :host([nve-control]) ::slotted(input:focus),
 :host([nve-control]) ::slotted(select:focus),
 :host([nve-control]) ::slotted(textarea:focus),

projects/core/.visual/toolbar.png

@@ -269,94 +269,105 @@ describe(`${Control.metadata.tag}: fit-text input`, () => {
 removeFixture(fixture);
 });
 
-it('should set control width to input text character width',async()=>{
+it('should set input width to text content width',async()=>{
+awaitnewPromise(resolve=>requestAnimationFrame(resolve));
+constfitTextWidth=input.getBoundingClientRect().width;
+
+element.fitText=false;
 awaitelementIsStable(element);
-expect(element.style.getPropertyValue('--control-width')).toBe(`4ch`);
+awaitnewPromise(resolve=>requestAnimationFrame(resolve));
+
+expect(fitTextWidth).toBeLessThan(input.getBoundingClientRect().width);
 });
 
-it('should update control width to input text character width',async()=>{
-awaitelementIsStable(element);
+it('should update input width to text content width',async()=>{
+awaitnewPromise(resolve=>requestAnimationFrame(resolve));
+constinitialWidth=input.getBoundingClientRect().width;
+
 input.value='123456789012345678901234567890';
 input.dispatchEvent(newEvent('input'));
 awaitelementIsStable(element);
-expect(element.style.getPropertyValue('--control-width')).toBe(`30ch`);
+awaitnewPromise(resolve=>requestAnimationFrame(resolve));
+
+expect(input.getBoundingClientRect().width).toBeGreaterThan(initialWidth);
 });
 
-it('should update control width to input text character width with icon offset',async()=>{
-awaitelementIsStable(element);
+it('should update input width to native date content width',async()=>{
+awaitnewPromise(resolve=>requestAnimationFrame(resolve));
+consttextWidth=input.getBoundingClientRect().width;
+
 input.type='date';
 input.value='';
 input.dispatchEvent(newEvent('input'));
 awaitelementIsStable(element);
-expect(element.style.getPropertyValue('--control-width')).toBe(`4ch`);
-expect(input.style.maxWidth).toBe(`2ch`);
+awaitnewPromise(resolve=>requestAnimationFrame(resolve));
+
+expect(input.getBoundingClientRect().width).toBeGreaterThan(textWidth);
 });
 });
 
-describe(`${Control.metadata.tag}: fit-content input`,()=>{
+describe(`${Control.metadata.tag}: fit-text select`,()=>{
 letfixture: HTMLElement;
 letelement: Control;
-letinput: HTMLInputElement;
+letselect: HTMLSelectElement;
 
 beforeEach(async()=>{
 fixture=awaitcreateFixture(html`
-<nve-controlfit-content>
+<nve-controlfit-text>
 <label>label</label>
-<inputtype="text" />
+<select>
+<optionvalue="short">Short</option>
+<optionvalue="long">A much longer option</option>
+</select>
 </nve-control>
  `);
 element=fixture.querySelector(Control.metadata.tag);
-input=fixture.querySelector('input');
+select=fixture.querySelector('select');
 awaitelementIsStable(element);
 });
 
 afterEach(()=>{
 removeFixture(fixture);
 });
 
-it('should update control width to input browser default content',async()=>{
+it('should update select width to selected content width',async()=>{
+awaitnewPromise(resolve=>requestAnimationFrame(resolve));
+constinitialWidth=select.getBoundingClientRect().width;
+
+select.value='long';
+select.dispatchEvent(newEvent('change'));
 awaitelementIsStable(element);
-awaitnewPromise(r=>requestAnimationFrame(r));
-expect(Math.floor(input.getBoundingClientRect().width)>100).toBe(true);
-expect(Math.floor(input.getBoundingClientRect().width)<250).toBe(true);
+awaitnewPromise(resolve=>requestAnimationFrame(resolve));
+
+expect(select.getBoundingClientRect().width).toBeGreaterThan(initialWidth);
 });
 });
 
-describe(`${Control.metadata.tag}: fit-text select`,()=>{
+describe(`${Control.metadata.tag}: fit-content input`,()=>{
 letfixture: HTMLElement;
 letelement: Control;
-letinput: HTMLSelectElement;
+letinput: HTMLInputElement;
 
 beforeEach(async()=>{
 fixture=awaitcreateFixture(html`
-<nve-controlfit-text>
+<nve-controlfit-content>
 <label>label</label>
-<select>
-<optionvalue="1">Option 1</option>
-<optionvalue="2">Option 12345678</option>
-</select>
-<nve-control-message>message</nve-control-message>
+<inputtype="text" />
 </nve-control>
  `);
 element=fixture.querySelector(Control.metadata.tag);
-input=fixture.querySelector('select');
+input=fixture.querySelector('input');
 awaitelementIsStable(element);
 });
 
 afterEach(()=>{
 removeFixture(fixture);
 });
 
-it('should set control width to input text character width',async()=>{
-awaitelementIsStable(element);
-expect(element.style.getPropertyValue('--control-width')).toBe(`12ch`);
-});
-
-it('should update control width to input text character width',async()=>{
-awaitelementIsStable(element);
-input.value='2';
-input.dispatchEvent(newEvent('change'));
+it('should update control width to input browser default content',async()=>{
 awaitelementIsStable(element);
-expect(element.style.getPropertyValue('--control-width')).toBe(`19ch`);
+awaitnewPromise(r=>requestAnimationFrame(r));
+expect(Math.floor(input.getBoundingClientRect().width)>100).toBe(true);
+expect(Math.floor(input.getBoundingClientRect().width)<250).toBe(true);
 });
 });

projects/core/src/forms/control/control.css

@@ -171,10 +171,6 @@ export class Control extends LitElement {
 super.disconnectedCallback();
 this.shadowRoot!.removeEventListener('slotchange',this.#onRootSlotchange);
 this.shadowRoot!.removeEventListener('slotchange',this.#onInputSlotchange);
-if(this.fitText&&this.input){
-this.input.removeEventListener('input',this.#onFitTextUpdate);
-this.input.removeEventListener('change',this.#onFitTextUpdate);
-}
 this.#observers.forEach(observer=>observer.disconnect());
 this.#observers.length=0;
 }
@@ -184,7 +180,6 @@ export class Control extends LitElement {
 
 if(this.input&&this.#observers.length===0){
 this.#setupInput();
-this.#setupFitText();
 }
 };
 
@@ -242,31 +237,6 @@ export class Control extends LitElement {
 this.#updateAssociations();
 };
 
- #setupFitText(){
-if(this.fitText){
-this.#getCharacterWidth();
-this.input.addEventListener('input',this.#onFitTextUpdate);
-this.input.addEventListener('change',this.#onFitTextUpdate);
-}
-}
-
- #onFitTextUpdate =()=>{
-this.#getCharacterWidth();
-};
-
- #getCharacterWidth(){
-if(this.input.tagName==='INPUT'){
-constoffset=this.input.type!=='text' ? 4 : 0;
-this.style.setProperty('--control-width',`${this.input.value.length+offset}ch`);
-this.input.style.setProperty('max-width',`${this.input.value.length+2}ch`,'important');
-}elseif(this.input.tagName==='SELECT'){
-this.style.setProperty(
-'--control-width',
-`${(this.inputasunknownasHTMLSelectElement).options[(this.inputasunknownasHTMLSelectElement).selectedIndex]!.textContent!.length+4}ch`
-);
-}
-}
-
  #polyfillShowPicker(){
 if(!this.input.showPicker){
 this.input.showPicker=()=>this.input.focus();

projects/core/src/forms/control/control.test.ts

@@ -22,10 +22,6 @@
  min-width: var(--min-width);
 }
 
-:host([fit-text]) {
---max-width: fit-content;
-}
-
 [input] {
 height:var(--height);
 background:var(--background);