Only first Option is displayed if form depends on custom attribute

[michielbdejong]

Consider the following code:

const container = document.getElementById('div-optionsFieldDependingOn')
      const already = {}
      const subject = UI.rdf.namedNode('http://example.com/#this')
      const exampleOptionsField = UI.rdf.namedNode('http://example.com/#exampleOptionsField')
      const store = UI.rdf.namedNode('http://example.com/#store')
      const callbackFunction = (ok, errorMessage) => {
        console.log(ok, errorMessage, document.getElementById('div-optionsFieldDependingOn').innerHTML);
      }

      // This form depends on colour:
      UI.store.add(exampleOptionsField, UI.ns.ui('dependingOn'), UI.rdf.namedNode('http://example.com/#persona'), UI.rdf.namedNode('http://example.com/'))
      
      // UI to display in case subject is blue:
      UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-developer'), UI.rdf.namedNode('http://example.com/'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-developer'), UI.ns.ui('for'), UI.rdf.namedNode('http://example.com/#developer'), UI.rdf.namedNode('http://example.com/'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-developer'), UI.ns.ui('use'), UI.rdf.namedNode('http://example.com/#ui-for-developers'), UI.rdf.namedNode('http://example.com/'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-developers'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-developers'), UI.ns.ui('contents'), '[UI for developers]')
      
      // UI to display in case subject is red:
      UI.store.add(exampleOptionsField, UI.ns.ui('case'), UI.rdf.namedNode('http://example.com/#if-subject-is-power-user'), UI.rdf.namedNode('http://example.com/'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-power-user'), UI.ns.ui('for'), UI.rdf.namedNode('http://example.com/#power-user'), UI.rdf.namedNode('http://example.com/'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#if-subject-is-power-user'), UI.ns.ui('use'), UI.rdf.namedNode('http://example.com/#ui-for-power-users'), UI.rdf.namedNode('http://example.com/'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-power-users'), UI.ns.rdf('type'), UI.ns.ui('Comment'))
      UI.store.add(UI.rdf.namedNode('http://example.com/#ui-for-power-users'), UI.ns.ui('contents'), '[UI for power users]')

      // Subject is both a developer and a power user, so it should display both [UI for developers] and [UI for power users]
      // but see 
      UI.store.add(subject, UI.rdf.namedNode('http://example.com/#persona'), UI.rdf.namedNode('http://example.com/#developer'), UI.rdf.namedNode('http://example.com/'))
      UI.store.add(subject, UI.rdf.namedNode('http://example.com/#persona'), UI.rdf.namedNode('http://example.com/#power-user'), UI.rdf.namedNode('http://example.com/'))
      
      // FIXME: https://github.com/solid/solid-ui/issues/239
      document.outlineManager = {
        appendPropertyTRs: () => {}
      }
      const result = UI.widgets.field[UI.ns.ui('Options').uri](
        document,
        container,
        already,
        subject,
        exampleOptionsField,
        store,
        callbackFunction
      )

You would expect it to display both the developer and the power user UI but it only displays one of them, at random.