Firebase-document Erratic Behaviour

[igniparra]

Description

Using Firebase-Document not always works. I'm not sure how to debug it, and I don't get any errors, but the queried values sometimes get downloaded, sometimes don't, and I can't find why.

Steps to reproduce

Please refer to the source code located on https://github.com/igniparra/notasdai.
I have 4 components that use Firebase-document to populate a dropdown menu, three of them work ok, but the other one, sometimes works, other doesn't, sometimes it takes for me to swap between the components for it to refresh.

Any tips or assistance would be HIGHLY appreciated!

Thanks!

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

[merlinnot]

Can you share a code snippet? I've came across similar issue when I tried to use separate docs for each value in the dropdown. Is that your use case?

[igniparra]

I didn't know how much code to paste, that's why I uploaded the project to github.

I guess this should be enough, but let me know what else I can show you.

` <script>
// Initialize Firebase
var config = {
apiKey: "",
authDomain: "notasdai.firebaseapp.com",
databaseURL: "https://notasdai.firebaseio.com",
projectId: "notasdai",
storageBucket: "notasdai.appspot.com",
messagingSenderId: ""
};
firebase.initializeApp(config);
</script>

<firebase-app
  name="notasdai"
  auth-domain="notasdai.firebaseapp.com"
  database-url="https://notasdai.firebaseio.com"
  api-key=""
  storage-bucket="notasdai.appspot.com"
  messaging-sender-id="">
</firebase-app>

  <div class="card">
    <div class="layout horizontal layout-start">
      <h1>Proyecto de Auditoría</h1>
      <firebase-document
        path="/proyectos"
        data="{{auditorias}}">
      </firebase-document>
      <paper-dropdown-menu class="dropdown">
        <paper-listbox slot="dropdown-content" selected={{auditoria}} attr-for-selected="name">
          <dom-repeat items="{{_toArray(auditorias)}}">
            <template>
              <paper-item name={{item.val}}>{{item.val}}</paper-item>
            </template>
          </dom-repeat>
        </paper-listbox>
      </paper-dropdown-menu>
    </div>
  </div>`

With separate docs you mean different components? It's only one that gets its data from this tree branch:

Thanks!

[tjmonsi]

This can be hack I guess but can you try adding this?

...
<dom-repeat items="{{_toArray(auditorias)}}" id="auditorias-array">
  ...
</dom-repeat>
...

static get properties () {
  return {
     ...
     auditorias: {
       type: Object
     }
  }
}

static get observers () {
  '_updateArray(auditorias.*)'
}

_updateArray () {
  document.querySelector('#auditorias-array').render();
}

It might be because of the dom-repeat not firing render of the elements?