Option for specifying a dynamic width #329
Conversation
There was a problem hiding this comment.
@dopatraman Thanks for sending the PR! Please check my comment.
| @@ -204,7 +205,7 @@ export class Dropdown extends EventEmitter { | |||
| if (doc) { | |||
| const elementWidth = this.el.offsetWidth | |||
| if (cursorOffset.left) { | |||
| const browserWidth = doc.clientWidth | |||
| const browserWidth = this.options.dynamicWidth ? doc.scrollWidth : doc.clientWidth | |||
There was a problem hiding this comment.
I'm wondering if there are other potentially available value here. So I'd like to support a function parameter something like ↓ instead of a boolean parameter for flexibility:
new Textcomplete(editor, [strategy], {
dropdown: {
getParentWidth: (el) => el.scrollWidth // default: (el) => el.clientWidth
}
})There was a problem hiding this comment.
There's an issue with this approach: the element passed in will always be the document element, and it will be hard coded into the library. So what we end up with is not much flexibility and a more confusing interface:
const browserWidth = this.options.getParentWidth ? this.options.getParentWidth(doc) : doc.clientWidth; Thoughts?
There was a problem hiding this comment.
ic, finally this patch seems good for me. I'm going to merge.
There was a problem hiding this comment.
Oops, there isn't this.options. (There is this.option 🤯)
Goal:
The goal of this PR is to provide users with an option to specify that their UI features a dynamic width.
Reason for change:
The application I am building expands the width of the document element dynamically. As a result, the anchor point of the dropdown stays at the window width's edge instead of expanding rightward.
Since the
clientWidthof the document is computed initially and never again, it isn't ideal for applications whose UI expands. Instead,scrollWidthworks better. This PR adds an option for specifying a need for this value.