Refactor autocomplete/emoji input #565

Closed
opened 2019-06-02 21:08:03 +00:00 by hj · 2 comments
Member

Problem:

Wrapping input/textarea in an another component makes it harder to access the said component from outside - you have to use $ref and such, punching through a component. Also currently autocomplete uses a flimsy custom thing and should use proper Popper.

Solution should be something like a mixin that enhances an existing input/textarea.

Possible solutions:

  1. Custom vue directive
  2. Component that takes input/textarea as a slot.
Problem: Wrapping input/textarea in an another component makes it harder to access the said component from outside - you have to use `$ref` and such, punching through a component. Also currently autocomplete uses a flimsy custom thing and should use proper Popper. Solution should be something like a mixin that enhances an existing input/textarea. Possible solutions: 1. Custom vue directive 2. Component that takes input/textarea as a slot.
Author
Member

Locally i tried to use custom vue directive. It's entirely possible to do this, however it has certain limitations - such as there isn't a whole lot of what you can do there without messing around - for example I can't really create new elements (probably can but with JSX), and the original idea was to use singleton popper which would reattach itself to different components which would be marked with v-autocomplete="['users', 'emoji]". I got as far as having singleton component and custom directive - two would communicate using this.$root and emitting/listening events, proxying focus/blur/keydown DOM events.

However the problem is that I can't really use vue-popper because its API assumes I'll pass reference element as a slot. Looking into popper itself it doesn't seem like it has an API to change reference element, except for creating new Popper instance. Not sure if it's worth it re-creating it over and over or hacking in something for that. Right now using a slot solution sounds more promising.

Locally i tried to use custom vue directive. It's entirely possible to do this, however it has certain limitations - such as there isn't a whole lot of what you can do there without messing around - for example I can't really create new elements (probably can but with JSX), and the original idea was to use singleton popper which would reattach itself to different components which would be marked with `v-autocomplete="['users', 'emoji]"`. I got as far as having singleton component and custom directive - two would communicate using `this.$root` and emitting/listening events, proxying focus/blur/keydown DOM events. However the problem is that I can't really use vue-popper because its API assumes I'll pass reference element as a slot. Looking into popper itself it doesn't seem like it has an API to change reference element, except for creating new Popper instance. Not sure if it's worth it re-creating it over and over or hacking in something for that. Right now using a slot solution sounds more promising.
Author
Member

Slots seem to be working much better than directive, I don't even need to use JSX, however you cannot attach listeners to a <slot> in .vue file, mostly because it's not clear what's in there and <slot> could be multiple things at once. So event listeners attached explicitly in mounted/unmounted

Slots seem to be working much better than directive, I don't even need to use JSX, however you cannot attach listeners to a `<slot>` in `.vue` file, mostly because it's not clear what's in there and `<slot>` could be multiple things at once. So event listeners attached explicitly in `mounted`/`unmounted`
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
pleroma/pleroma-fe#565
No description provided.