-
Notifications
You must be signed in to change notification settings - Fork 25
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
Popover panel with input button ( and Bootstrap ) #850
Comments
I think this is due to the fun render() {
attr("id", componentId)
trapFocusWhenever(opened) // this call relies on the default params, see below
} Whereas the function definition is as follows: fun Tag<HTMLElement>.trapFocusWhenever(
condition: Flow<Boolean>,
restoreFocus: Boolean = true, // This will put the focus back!
setInitialFocus: InitialFocus = TryToSet
) { I would suggest you "clone" the If that works, we could discuss, whether and how we open up the I have the idea, that you want to build some "filtering select-menu" or "ComboBox"? A small extra comment to your code: popOver {
div("form-floating") {
popOverButton("form-control border border-2", tag = RenderContext::input) {
id("searchFruitInput") // this is not so good! Pass the You may have a look at the headless components implementations. Iirc we use the |
Hello, Thank you for your information and sorry for the late reply. By following your instructions I was able to correct the focus problem using the following code: fun RenderContext.popOver(
restoreFocus: Boolean = true,
classes: String? = null,
id: String? = null,
scope: (ScopeContext.() -> Unit) = {},
initialize: PopOver<HTMLDivElement>.() -> Unit
): Tag<HTMLDivElement> {
addComponentStructureInfo("popOver", this@popOver.scope, this)
return RenderContext::div.invoke(this, classes(classes, PopUpPanel.POPUP_RELATIVE), id, scope) {
PopOver(this, id).run {
initialize(this)
attr("id", componentId)
trapFocusWhenever(opened, restoreFocus = restoreFocus)
}
}
} I have also started to try to create a specific component for this part. It's starting to work but I'm still waiting to discuss about it with my colleagues. What's best for the next step : to create a PR and discuss about it or to discuss it beforehand and do an initial review before the PR? |
Nice!
I would suggest to first think a bit more about the topic. As your use case is some rather complex, dedicated Combobox, I would deny the need to change the PopOver component. I would suggest to drop the PopOver inside your approach and to set up directly upon the If it is useful to provide such a parameter is imho a separate discussion and would be a separate PR imho. We need defintely to find use cases for |
As PR #856 was solved recently, I would suggest to try this again. The focus-trap was wrongly placed inside the Popover component. So I would assume, that the initial problem is solved by this one. |
Hello,
I have the following issue but I don't know if it's a bug from fritz2 or a bad development.
Description :
I'd like to create a dropdown with a list so that I can select from a list of items. I had the restriction of using Boostrap for the CSS part. But I've run into compatibility problems.
In Boostrap we can use Floating Labels to make our forms a bit more dynamic.
In theory, I wanted to turn my
popOverButton
into aninput
text, which would display the drop-down list when clicked. So far so good, but when I dismiss I get a focus reset, which puts the mouse cursor back in the input.Do you have any idea where this might be coming from?
To Reproduce :
I created a repository with some code to have an example.
./gradlew jsRun
)Desktop :
Thanks in advance for your help.
Best regards
The text was updated successfully, but these errors were encountered: