{"action":"created","issue":{"url":"https://api.github.com/repos/aurelia/ux/issues/170","repository_url":"https://api.github.com/repos/aurelia/ux","labels_url":"https://api.github.com/repos/aurelia/ux/issues/170/labels{/name}","comments_url":"https://api.github.com/repos/aurelia/ux/issues/170/comments","events_url":"https://api.github.com/repos/aurelia/ux/issues/170/events","html_url":"https://github.com/aurelia/ux/issues/170","id":323253635,"number":170,"title":"`focus` attribute support","user":{"login":"manuel-guilbault","id":718466,"avatar_url":"https://avatars2.githubusercontent.com/u/718466?v=4","gravatar_id":"","url":"https://api.github.com/users/manuel-guilbault","html_url":"https://github.com/manuel-guilbault","followers_url":"https://api.github.com/users/manuel-guilbault/followers","following_url":"https://api.github.com/users/manuel-guilbault/following{/other_user}","gists_url":"https://api.github.com/users/manuel-guilbault/gists{/gist_id}","starred_url":"https://api.github.com/users/manuel-guilbault/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/manuel-guilbault/subscriptions","organizations_url":"https://api.github.com/users/manuel-guilbault/orgs","repos_url":"https://api.github.com/users/manuel-guilbault/repos","events_url":"https://api.github.com/users/manuel-guilbault/events{/privacy}","received_events_url":"https://api.github.com/users/manuel-guilbault/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-05-15T14:52:12Z","updated_at":"2018-05-16T13:09:48Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"**I'm submitting a feature request**\r\n\r\n* **Library Version:**\r\n0.10.0\r\n\r\n**Current behavior:**\r\nTrying to use the built-in `focus` attribute on UX components (e.g.: `ux-input` or `ux-textarea`) doesn't work.\r\n\r\n**Expected/desired behavior:**\r\nSince `focus` is a built-in attribute, one would expect it to work with UX focusable components.\r\n\r\n## Analysis\r\n\r\nI see two ways to implement this.\r\n\r\nA first solution would be to expose a two-way bindable `focus` property, which would in turn be bound on the underlying input/select/textarea (this is already what's done for `ux-textarea`):\r\n\r\n```ts\r\nexport class UxTextArea implements UxComponent {\r\n  // rest of class details omitted\r\n  @bindable({ defaultBindingMode: bindingMode.twoWay }) public focus = false;\r\n}\r\n```\r\n\r\n```html\r\n<template role=\"textbox\">\r\n  <textarea focus.bind=\"focus\"></textarea>\r\n</template>\r\n```\r\n\r\nHowever, after a couple of tests with `ux-textarea`, it doesn't seem to work. It looks like Aurelia gives precedence to custom attributes over a custom element's bindable properties when there's a name conflict. This means that when `aurelia-templating-resources` is loaded, any property named `focus` on a custom element will be ignored and the `focus` custom attribute will be used instead. So, implementing this solution would require to change how Aurelia resolves attributes naming conflicts.\r\n\r\nA second solution would be to add the `focus` and `blur` methods to the component's HTML element (through the custom prototype), so the built-in `focus` attribute can work properly (it works by calling those methods when the value bound to it changes):\r\n\r\n```ts\r\nexport interface UxInputElement extends HTMLElement {\r\n  value: any;\r\n  focus(): void;\r\n  blur(): void;\r\n}\r\n\r\n// Rest of code omitted\r\n\r\nconst uxInputElementProto = Object.assign(\r\n  Object.create(HTMLElement.prototype, {\r\n    value: {\r\n      get() {\r\n        return getVm<UxInput>(this).getValue();\r\n      },\r\n      set(value: any) {\r\n        getVm<UxInput>(this).setValue(value);\r\n      }\r\n    }\r\n  }), {\r\n    focus() {\r\n      getVm<UxInput>(this).focused = true;\r\n    },\r\n    blur() {\r\n      getVm<UxInput>(this).focused = false;\r\n    }\r\n  }\r\n});\r\n```"},"comment":{"url":"https://api.github.com/repos/aurelia/ux/issues/comments/389512457","html_url":"https://github.com/aurelia/ux/issues/170#issuecomment-389512457","issue_url":"https://api.github.com/repos/aurelia/ux/issues/170","id":389512457,"user":{"login":"bigopon","id":9994529,"avatar_url":"https://avatars0.githubusercontent.com/u/9994529?v=4","gravatar_id":"","url":"https://api.github.com/users/bigopon","html_url":"https://github.com/bigopon","followers_url":"https://api.github.com/users/bigopon/followers","following_url":"https://api.github.com/users/bigopon/following{/other_user}","gists_url":"https://api.github.com/users/bigopon/gists{/gist_id}","starred_url":"https://api.github.com/users/bigopon/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bigopon/subscriptions","organizations_url":"https://api.github.com/users/bigopon/orgs","repos_url":"https://api.github.com/users/bigopon/repos","events_url":"https://api.github.com/users/bigopon/events{/privacy}","received_events_url":"https://api.github.com/users/bigopon/received_events","type":"User","site_admin":false},"created_at":"2018-05-16T13:09:48Z","updated_at":"2018-05-16T13:09:48Z","author_association":"MEMBER","body":"Also I think all inputable custom elements need to expose methods blur and focus sooner / later, so it's will be a conflict if focus is made bindable property.\r\n\r\n@ZHollingshead @EisenbergEffect  thoughts ?"}}
{"actor":{"display_login":"bigopon"}}