Lundalogik
limel-form: calculation of columns only on resize wrong initial value
Current behavior
When having a limel-form with layout grid the calculation of number of columns seems off and is "corrected" if the size of the form is resized.
It looks like it's here
The initial width is 35rem and then it's single column view which makes my two fields on separate rows.
But when changing the width to 34rem and then back to 35rem the two fields are on the same row (Which is the wanted behavior)
See how it behaves below:
https://user-images.githubusercontent.com/154725/156997308-d52e60e6-5e5e-4c13-bf96-ad6784da951b.mov
(I made a video of the gif, original gif here / @adrianschmidt)
Steps to reproduce the behavior: FormSchema:
{
type: 'object',
required: ['note'],
lime: {
layout: {
type: 'grid',
columns: 2,
},
},
properties: {
person: {
title: 'Person',
readOnly: true,
lime: {
layout: {
colSpan: 1,
},
},
},
company: {
title: 'Company',
readOnly: true,
lime: {
layout: {
colSpan: 1,
},
},
},
note: {
title: 'Note',
lime: {
layout: {
colSpan: 'all',
}
}
}
}
};
Render it inside a limel-dialog and set the --dialog-width to for instance 35rem
Expected behavior
It should get the same number of columns initially and after a resize-event. In this case 2 columns.
Environment
- lime-elements version: 35.0.0-next.9
Hmm… that's odd… 🤔
@Kiarokh Do you have any idea what could cause this?
@TommyLindh2 FYI, nowadays, GitHub supports uploading videos, as well as gifs, and videos have the benefit of having playback controls 🙂
Yes I also wanted to ask you to use videos. It's so hard to follow Gifs and read stuff. You can't pause them and think, and if you miss a detail it's so hard to wait for the video to restart from the beginning again. It's suuuuper hard :)
Another thing I came to think of is that this is probably unnecessary to specify, since that's the default:
lime: {
layout: {
colSpan: 1,
},
},
Not sure if that is causing the issue. But just thought to mention it anyway.
Is it possible for you guys to call one day and sharescreen, so that I can inspect this on your machines?
I think I just experienced the same thing in a collapsible-section, and that made me wonder if it's similar to the thing with some MDC components, where you have to trigger them to re-render after opening the dialog or collapsible-section they're in… 🤔
limel-dialog does dispatch a resize event 100 ms after opening though, so that ought to be taken care of already… 🧐
@Kiarokh I think I can share and show on monday if that fits your schedule?
Seems like content of the dialog which are in the DOM have no initial width, since the container has display: none; when it's loaded. So limel-form thinks that there is no space for more than one column, and decides to put a 1 column layout, on the grid.
https://user-images.githubusercontent.com/35954987/154981978-b04f6b24-342f-4331-9069-5fd576545307.mov
We tested writing an initial width for the limel-form as an inline style. But that didn't help. Any ideas @adrianschmidt ?
I think the dialog emits a resize event after it has been opened. Listen to that and check the width when the event is received, then a width ought to have been set.
Oh, and remember to remove the event listener when the component is removed too!
@adrianschmidt Isn't this something that you can try and depending on result do a fix or not. Otherswise we will just go back and forth and waste a lot of each others time.
Or are you suggesting that as a work-around?
Ah, sorry, you're right, this seems like something we should fix in limel-form. If the problem is what I think it is, it should be easy (and thus quick) to fix 👍
I got annoyed with not being able to pause the gif, so I screen captured a video of it and replaced the gif with that 😁
I got annoyed with not being able to pause the gif, so I screen captured a video of it and replaced the gif with that 😁
I will totally use the video feature next time 😊
We faced the same/similar problem in the CPQ project
https://user-images.githubusercontent.com/50618208/212048919-4fff0022-8147-4436-94b0-64a1f9b1b858.mov
Is it possible to reproduce this in the docs, or in dev-feature or some other solution where I can play around with it. I'm somewhat ashamed to say, but I don't have time to figure out how to follow the steps to reproduce in the description.
Is it possible to reproduce this in the docs, or in dev-feature or some other solution where I can play around with it. I'm somewhat ashamed to say, but I don't have time to figure out how to follow the steps to reproduce in the description.
I tried it locally in the lime-elements docs by changing the src\components\dialog\examples\dialog-form.tsx example to use limel-form, and that works to reproduce this error.
- Add Style file
dialog-form.scssto the examples folder of the dialog:host(limel-example-dialog-form) { .registration-dialog { --dialog-width: 35rem; } } - Replace the example
dialog-form.tsxto the following:import { FormSchema, LimelFormCustomEvent, ValidationStatus, } from '@limetech/lime-elements'; import { Component, h, State } from '@stencil/core'; const MIN_NAME_LENGTH = 5; const MIN_AGE = 20; const MAX_AGE = 50; interface FormValue { name: string; age: number; percentage: number; } /** * Dialog with form and header */ @Component({ tag: 'limel-example-dialog-form', styleUrl: 'dialog-form.scss', shadow: true, }) export class DialogFormExample { @State() private isOpen = false; @State() private isFormValid = false; @State() private formValue: FormValue; @State() private isConfirmationOpen = false; private formSchema: FormSchema<FormValue> = { type: 'object', lime: { layout: { type: 'grid', columns: 2, }, }, properties: { name: { type: 'string', title: 'Name', minLength: MIN_NAME_LENGTH, }, age: { type: 'number', title: 'Age', minimum: MIN_AGE, maximum: MAX_AGE, }, percentage: { type: 'number', title: 'Percentage', lime: { layout: { colSpan: 'all', }, component: { name: 'limel-slider', props: { unit: '%', }, }, }, }, }, }; public render() { return [ <limel-button primary={true} label="Open" onClick={this.openDialog} />, <limel-dialog class="registration-dialog" heading="Registration" open={this.isOpen} onClose={this.closeDialog} onClosing={this.onClosing} > <limel-form value={this.formValue} schema={this.formSchema} onChange={this.handleFormChange} onValidate={this.handleFormValidation} /> <limel-button label="Cancel" onClick={this.closeDialog} slot="button" /> <limel-button primary={true} label="Save" disabled={!this.isFormValid} onClick={this.submitForm} slot="button" /> </limel-dialog>, <limel-dialog open={this.isConfirmationOpen} onClose={this.closeConfirmation} > <p>Are you sure you want to close this? </p> <limel-button label="No" onClick={this.onConfirmNegative} slot="button" /> <limel-button label="Yes" onClick={this.onConfirmPositive} slot="button" /> </limel-dialog>, ]; } private handleFormChange = (event: LimelFormCustomEvent<FormValue>) => { this.formValue = event.detail; }; private handleFormValidation = ( event: LimelFormCustomEvent<ValidationStatus>, ) => { this.isFormValid = event.detail.valid; }; private submitForm = () => { alert(`${this.formValue?.name} is ${this.formValue?.age} years old`); this.closeDialog(); }; private openDialog = () => { this.isOpen = true; }; private closeDialog = () => { this.isOpen = false; }; private onClosing = () => { console.log('dialog is closing now!'); this.isConfirmationOpen = true; }; private closeConfirmation = () => { this.isConfirmationOpen = false; }; private onConfirmPositive = () => { this.isConfirmationOpen = false; this.isOpen = false; }; private onConfirmNegative = () => { this.isOpen = true; this.isConfirmationOpen = false; }; }
:tada: This issue has been resolved in version 37.60.2 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
