Title in lime-input(text-area) behaves differently with and without focus

[terryilebode6]

Current behavior

The title text moves from the top of the input field, to inside the input field when the cursor is no longer focused on it , it sometimes jumbles up with the test

Steps to reproduce the behavior:

1. add an input field with title to a modal, in my case my input field was a web component i passed to a schema

Expected behavior

Environment

• lime-elements version: "@limetech/lime-elements": "^31.1.3", "@limetech/lime-web-components": "^4.20.0",

https://user-images.githubusercontent.com/60092998/148730633-f0d9a6e8-b319-4a4b-9142-1d6259226007.mov

• Framework used:
• Logs:

[adrianschmidt]

If you really are using Lime Elements v31.x, while only from April 2021, a lot has happened since then, so I would suggest upgrading. But:

If you're using this inside the Lime CRM Web Client, the version of Lime Elements used is decided by the web client, not your package, so you need to check there. When logged in, open the browser dev tools, go to the Console tab, and write Lime.versions, press enter and inspect the returned object.

[terryilebode6]

thanks @adrianschmidt , will try that out and give feedback

[adrianschmidt]

@terryilebode6 Did you have a chance to look into this again? Did it resolve itself with an update or something, or is it still a problem?

[terryilebode6]

@adrianschmidt haven't Checked yet, got stuck on a cycle bug, but it's top of my list today.

[adrianschmidt]

No worries. Just wanted to check if perhaps it had been resolved and you had forgotten to tell us. We've got this issue in our inbox until there's some actionable info 🙂

[terryilebode6]

I tested this out with these versions and the bug is still there... I could help reproduce it , if that is necessary

[adrianschmidt]

I'm thinking this has something to do with the value not being updated as it should be, possibly because of a missing change handler or something. Can you link to the code where the limel-input is used?

[terryilebode6]

the webcompenent : https://github.com/Lundalogik/limepkg-consent/blob/2888a0370bdc443e660d20a2dda74e9b0b711cab/frontend/src/components/lwc-limepkg-consent-text-area/lwc-limepkg-consent-text-area.tsx#L7

I use it in a schema : https://github.com/Lundalogik/limepkg-consent/blob/2888a0370bdc443e660d20a2dda74e9b0b711cab/limepkg_consent/bulk_consent/schema.py#L59

[jgroth]

You should not have to create your own web component just to have a text area. You are also not implementing a lot of properties from the FormComponent interface in your component. You should at least implement value and change, otherwise the component will not work when used in the form.

If you don't want to create your own web component, you can just use something like this in the schema instead. This will use the default component for text fields (which is limel-input-field) and set type to textarea

class Schema:
    note = fields.String(
        metadata={
            "title": note_localname,
            "lime": {
                "component": {
                    "props": {
                        "type": "textarea"
                     }
                }
            }

[adrianschmidt]

I'm guessing Johan's comment will be enough for you to solve the problem, so I'm closing this. Feel free to comment further on it though, if you need any further assistance, or just ping us in Slack.

[terryilebode6]

initially tried it without the component, but found out that when I tried to set the text-area-heigh style property, it was ignored , can I set that property from outside the component(using the above suggested method)?

[jgroth]

I'm not sure but you could try and just set the style as another prop, e.g.

{
    "props": {
        "type": "textarea",
        "style": "--textarea-height: 25em"
    }
}

The preferred way is probably to use a layout instead as described in the docs https://lundalogik.github.io/lime-elements/versions/34.1.0/#/component/limel-form/

I.e. you should set a rowSpan

{
    "component": {
        "props": {
            "type": "textarea",
        },
    },
    "layout": {
        "rowSpan": 2,
    },
}