No text displaying in a-gui-input's

[DaryllConway]

I've spent a whole day trying to get text to display in an a-gui-input but it's just constantly blank no matter what I do, can you see where I'm going wrong?

` <a-gui-flex-container flex-direction="column" justify-content="center" align-items="normal" component-padding="0.1" opacity="0.7" width="3.5" height="4.5" position="2 2.5 -6" rotation="0 0 0" gui-item="" geometry="" material="" gui-flex-container="">
    	<a-gui-input id="test_input" width="4" height="0.7" onclick="testInputAction" value="Testing" font-size="160px" font-color="#212121" border-color="#212121" border-hover-color="#424242" background-color="#FAFAFA" hover-color="#F5F5F5" active-color="#FFEB3B" gui-interactable="" gui-item="" geometry="" material="" role="input" gui-input="" position=""></a-gui-input>
    </a-gui-flex-container>`

[sulaemansantoso]

I got blank text too. the console shows something like this though. could it be the source of the problem ?

[kylebakerio]

Either of you ever figure this out? @sulaemansantoso @daryllconway

[kylebakerio]

It isn't documented in the readme as far as I can tell, but looking into the example code, it's pretty straightforward:

      <a-gui-flex-container
      id="startup-menu555"
      flex-direction="column" 
      justify-content="center" 
      align-items="normal" 
      component-padding="0.1"
      opacity="0.7" width="4" height="5"
      position="-6 1.5 -8" 
      rotation="0 -90 0"
      >
        <a-gui-input
         id="test_input555"
         width="3" height="0.7"
         onclick="alert('hi')"
         value="Starting value"
         font-size="160px"
         font-color="red"
         border-color="#212121"
         border-hover-color="#424242"
         background-color="#FAFAFA"
         hover-color="#F5F5F5"
         margin=".15 0 0 0"
         active-color="#FFEB3B"
        >
        </a-gui-input>
      </a-gui-flex-container>

var textField = document.querySelector("a-gui-input");
textField.components['gui-input'].appendText('adding text');
setTimeout(() => {alert('will delete text now'); textField.components['gui-input'].delete();}, 10000)

Note that "delete" deletes one character, not whole input.

[kylebakerio]

a little more digging in the source for gui-input shows that

textField.setAttribute('gui-input', 'text', "helloooo");

works for updating the text more than one char at a time

however, initial text values seem broken to me for now--if I figure out something I'll add it here, and hopefully eventually update the docs.

[kylebakerio]

(To be clear, the 'starting value' feature does seem broken, though.)

[sulaemansantoso]

Yes you're right, the issue is the starting value. but i haven't tried to look more into it

[sulaemansantoso]

i think this is due to a wrong variable name in input.js

whereas the schema for the component is not inputText but text

[kylebakerio]

There are many small things like that. I'm grateful to this library, but it needs a second pass of polish. It feels like someone created a full library beta version and threw a ton of components at the wall, but didn't check everything everywhere. Shows great promise, just needs minor tweaks, in the meantime takes workarounds like the one I mentioned. (As in, that's right, initial text value doesn't work, but you can populate initial text right after element creation with JS instead for now.)

I know there's a big update coming with some important, very nice changes. Once that lands, I'm hoping to actually take on a bunch of those small updates and documentation fixing. I've been developing my menu system in my app with this.

[marcusx2]

https://github.com/rdub80/aframe-gui/issues/62 anyone?