Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Repeatable Option Elements Not Rendering in Safari #38

Closed
tcmacdonald opened this issue Mar 6, 2018 · 4 comments
Closed

Repeatable Option Elements Not Rendering in Safari #38

tcmacdonald opened this issue Mar 6, 2018 · 4 comments

Comments

@tcmacdonald
Copy link

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
Copy link
Member

eavichay commented Mar 8, 2018

@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
Copy link
Author

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
Copy link
Member

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
Copy link
Member

@tcmacdonald Sorry, fixed in 2.3.6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants