Repeatable Option Elements Not Rendering in Safari

[tcmacdonald]

I’m having some trouble using the slim-repeat and slim-repeat-as attributes with <option> elements in Safari.

Here’s an example…

Slim.tag('test-binding',
`
  <ul><li s:repeat="items" bind>{{data}}</li></ul>
  <select><option s:repeat="items" bind>{{data}}</option></select>
`,
class extends Slim {
  onBeforeCreated() {
    this.items = ['one', 'two', 'three'];
  }
});

When viewing this example in Safari, the <li> elements render correctly but there are no options available when interacting with the <select> element. The console does show the iterated elements but they are not accessible to the user (screenshot here).

This appears to be a problem for Safari on both iOS and OSX. Other major, modern browsers render both elements as expected.

Any thoughts? Thanks for your help.

[eavichay]

@tcmacdonald Thanks for the update.
Which slim.js version are you working with?

Currently there are no automated tests on safari (only in chrome). AFAIK Safari worked just fine as there is a custom detection for non-chrome browsers for a different behaviors with repeaters. I will try to use several versions and see what went wrong (or maybe Safari made an update in their rendering engine).

Meanwhile until this is resolved - as a workaround

If the options are static and no need for real-time binding you could try to do hybrid rendering:

Slim.tag('my-tag', class extends Slim {
  get template() {
    return `<select>${this.items.map(createItemOption)}</select>`
  }
})

function createItemOption (item) {
  return `<option value="${item.value}">${item.label}</option>`
}

if you need a "live update", you can execute render and force it to redraw and re-bind. This is more expansive in terms of CPU but as long as the list is decent (not thousands) the user should not feel anything.

[tcmacdonald]

Thanks for the feedback @eavichay. I'm using version 3.2.3.

I played around with your suggested workaround. My array of options is being populated asynchronously so a redraw/rebind is really intriguing.

Whenever I invoke render() with a really simple template, it works just fine but when I try to redraw something more complex, it throws the following exception...

this.render(this.template);

// Cannot read property 'chain' of undefined at Function.bind (Slim.js:325)

I assume I'm doing this wrong. Can you point me at any examples?

[eavichay]

Thanks for the feedback. Please try upgrade to 2.3.4 I just released a fix. Your description may point out another potential bug. If you can please provide your full class code (Are you using Slim.tag or decorators?).

[eavichay]

@tcmacdonald Sorry, fixed in 2.3.6