TextArea: property "text" not updated

[moodyhunter]

See example https://tinyurl.com/ydorg5dq where the button text should follow the TextArea content.

• Commenting out the import Qaterial line and run without Qaterial does not have this problem:

[OlivierLDff]

Big issue of qaterial text area is that it doesn't herit from Template.Textarea but act like a proxy This should be fixed in future version when I will have time (I'm scarred to break existing code)

[OlivierLDff]

Best would be to have a TextArea not really styled (only font, no background) and have a TextArea2014, TextAreaOutlined, TextAreaFilled that bring a title and a background

[moodyhunter]

Thanks for the explanation. BTW, is there any replacement for the multiline text input that I can use for now?

[OlivierLDff]

Quick fix would be here : https://github.com/OlivierLDff/Qaterial/blob/ff61e9808a96b85e018d17d48e0056a7dce76578/qml/Qaterial/TextArea.qml#L375-L405

To add onTextChanged: () => _control.text = text

I'm already using it in some of my projects, but TextArea should be refactored like that in future version:

import QtQuick 2.12
import QtQuick.Templates 2.12 as T

import Qaterial 1.0 as Qaterial

T.TextArea
{
  id: root

  implicitWidth: Math.max(contentWidth + leftPadding + rightPadding,
    implicitBackgroundWidth + leftInset + rightInset)
  implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
    implicitBackgroundHeight + topInset + bottomInset)

  font: Qaterial.Style.textTheme.body2
  selectByMouse: true

  color: enabled ? palette.text : palette.toolTipText
  selectionColor: palette.highlight
  selectedTextColor: palette.highlightedText
  placeholderTextColor: palette.toolTipText

  palette
  {
    text: Qaterial.Style.colorTheme.primaryText
    toolTipText: Qaterial.Style.colorTheme.disabledText

    highlightedText: Qaterial.Style.colorTheme.primaryText
    highlight: Qaterial.Style.colorTheme.background8
  }

  cursorDelegate: Qaterial.CursorDelegate {}
}

As you can see, no background is provided. Neither title.

So idea is to have TextFieldTitle:

import QtQuick 2.15
import QtQml 2.15
import QtQuick.Templates 2.15 as T
import QtQuick.Controls 2.15

import Qaterial 1.0 as Qaterial

Qaterial.Label
{
  id: root

  property Item textField
  property bool error

  font: textField.font
  renderType: textField.renderType

  color:
  {
    if(!textField.enabled)
      return Qaterial.Style.colorTheme.disabledText

    if(error)
      return Qaterial.Style.colorTheme.errorText

    if(textField.activeFocus)
      return textField.palette.highlight

    return Qaterial.Style.colorTheme.secondaryText
  }

  text: "Title"

  property bool isPlaceholder: !textField.length && !textField.preeditText && !textField.activeFocus && !textField.placeholderText

  x: textField.leftPadding
  width: textField.width - textField.leftPadding - textField.rightPadding
  y:
  {
    if(isPlaceholder)
      return textField.topInset + Math.floor((textField.height - textField.topInset - textField.bottomInset - height) / 2)

    return -height + textField.topPadding
  }

  elide: Text.ElideRight

  Binding
  {
    target: root
    property: "font.pixelSize"
    value: root.isPlaceholder ? root.textField.font.pixelSize : 13
    restoreMode: Binding.RestoreValue
  }
  // Binding

  Behavior on y
  {
    NumberAnimation
    {
      easing.type: Easing.OutSine
      duration: 60
    }
    // NumberAnimation
  }
  // Behavior

  Behavior on font.pixelSize
  {
    NumberAnimation
    {
      easing.type: Easing.Linear
      duration: 10
    }
    // NumberAnimation
  }
  // Behavior
}

And then you can do something like:

Qaterial.TextArea
{
  id: root

  Qaterial.TextFieldTitle
  {
    textField: root
  }

  // background: YourOwnBackground {}
}

I'm using that in one of my project to easily create new control I will port that do Qaterial when I will have time to rebase/create:

• TextField2014 (then one we actually have)
• TextFieldOutlined
• TextFieldFilled
• All same variant for TextArea

Still not sure about the name neither, maybe we should still with what we have: OutlineTextField vs TextFieldOutlined. Not sure what is the best naming convention

[moodyhunter]

Thanks, I'll try it out and hope to see your refactor going online!

[OlivierLDff]

If you want my general opinion about how I did Qaterial right now, after some usage time:

• I feel that Qaterial basic Controls are doing more than they should
• It is hard to customize basic components (because Qaterial already customize too much basic components)

You can see that my latest commit were about very simple items: IconLabelWithCaption LabelWithCaption Icon

That provide really useful and reusable building block for complex component.

I realized it is easier to create custom items that meet specific need based on very simple Controls, than trying to customize a Control that can fit them all and become a Frankenstein Item bloated everywhere and over complex (ie current TextField, RawMaterialButton, etc...)

So my future update will go in that direction. Keep every Control really basic, and provide some decorated variant following Material Design documentation. And basic Control shoudn't add custom properties, otherwise consistency is too hard to follow.

To customize colors, I will use palette that is there everywhere (even if it is not mean for that). This will be easier for me to keep consistency (and make color customization easier).

[OlivierLDff]

I merged your quick fix in https://github.com/OlivierLDff/Qaterial/pull/123 Real fix would be https://github.com/OlivierLDff/Qaterial/issues/88 When I will have time for a future breaking version of Qaterial

[moodyhunter]

thanks!