RichTextItem width issue after draw

[michaelaveva]

Hi,

Setting the width on a RichTextItem after the form in which it is contained is already drawn causes it to be sized incorrectly.
Doing the same for any other type of form item does not cause any issues and the width of the item matches expectations.

Test case:
Here the form takes up the full page width, the 2 form columns together use 100% of the width, and the rich text item uses the width allocated to both columns.
This is initially sized as expected, with the item taking up the entire width of the screen.
After the item is drawn and a small delay the width of the item is set to '*' again.
Now the width of the RichTextItem appears to be wrong, it is sized to fit the control groups. If there are no controls then the width becomes 1.

   @Override
   public void onModuleLoad()
   {
      //TextAreaItem template = new TextAreaItem("test");
      RichTextItem template = new RichTextItem("test");
      template.setWidth("*");
      template.setHeight("*");
      template.setColSpan(2);
      template.setShowTitle(true);
      template.setTitleOrientation(TitleOrientation.TOP);
      //template.setControlGroups(new String[0]);

      DataSourceField field = new DataSourceField("test", FieldType.TEXT);
      field.setEditorProperties(template);

      DataSource ds = new DataSource();
      ds.setFields(field);


      DynamicForm form = new DynamicForm();
      form.setDataSource(ds);
      form.setWidth100();
      form.setHeight100();
      form.setNumCols(2);
      form.setTitleWidth(150);
      form.setColWidths(150, "*");

      form.draw();

      Scheduler.get().scheduleFixedDelay(() ->
      {
         FormItem item = new FormItem("test");
         form.setFields(item);

         for (FormItem i : form.getFields())
         {
            i.setWidth("*");
         }

         return false;
      }, 2000);
   }

Some observations:

• The issue does not occur when removing the delay and performing the form.draw() after adjusting the width, instead of before
• The issue does not occur for any other type of form item, e.g. when using the TextAreaItem the item maintains the correct width
• The issue seems to only occur if a DataSource is used
• When uncommenting the setControlGroups line it can be seen that the width (after the delay) becomes 1, making it look like the item (or at least the editing area) sizes to those control groups
• In the attached image I typed abcdefg, as can be seen in the console the item does contain that value but not all of that text is visible on the screen, looks like the editing area extends past the left edge

Versions:
SmartGWT v12.1p_2023-04-01/LGPL Development Only (built 2023-04-01)
GWT 2.9.0
Tested on latest version of Chrome and Firefox.

There are no errors or warnings in the console.
Any idea what might be causing this issue?
Thank you

[Isomorphic]

We're not certain on the reason for this delay-logic, but the call to setWidth() in a loop will no-op because the new field you added has the same name as the DSField, and that field already sets width to "*". Instead, the form needs refreshing after the fields are updated.

We'll look into whether there's a genuine bug here, since you mentioned other controls not having this problem - but, in the meantime, just calling form.redraw() after setFields() should be sufficient to address your issue. If not, please let us know, with a modified sample if necessary.

[michaelaveva]

Thanks for your reply,

Calling form.redraw() directly after setFields() indeed causes the RichTextItem to size correctly.
However if the redraw is done after the for loop that sets the width to "*" the odd sizing happens again (but only for RichTextItem).
Also if I resize the browser window then the RichTextItem does not scale to fit, while a TextAreaItem with the same settings does resize to fit.
The attached image and the following sample illustrates this behavior.

@Override
   public void onModuleLoad()
   {
      RichTextItem template = new RichTextItem("test");
      template.setWidth("*");
      template.setColSpan(2);
      template.setShowTitle(true);
      template.setTitleOrientation(TitleOrientation.TOP);

      TextAreaItem other = new TextAreaItem("other");
      other.setWidth("*");
      other.setColSpan(2);
      other.setShowTitle(true);
      other.setTitleOrientation(TitleOrientation.TOP);

      DataSourceField field = new DataSourceField("test", FieldType.TEXT);
      field.setEditorProperties(template);

      DataSourceField otherField = new DataSourceField("other", FieldType.TEXT);
      otherField.setEditorProperties(other);

      DataSource ds = new DataSource();
      ds.setFields(field, otherField);


      DynamicForm form = new DynamicForm();
      form.setDataSource(ds);
      form.setWidth100();
      form.setHeight100();
      form.setNumCols(2);
      form.setTitleWidth(150);
      form.setColWidths(150, "*");

      form.draw();

      FormItem item = new FormItem("test");
      FormItem otherItem = new FormItem("other");
      form.setFields(item, otherItem);

      for (FormItem i : form.getFields())
      {
         i.setWidth("*");
      }
      form.redraw();
   }

[Isomorphic]

You are still trying to call setWidth() in a loop, and it isn't clear why. And you are calling redraw() after that. We don't know why you are calling setWidth() at all, or what you expect it to do, since, as we noted, the width is already set on the DSField.editorProperties. It doesn't seem to make any sense to try to do this. But you definitely need to redraw the form before you try to manipulate anything in it.

Please clarify why you are trying to do this / what you are trying to achieve with it.

[Isomorphic]

In fact, please disregard the previous confusion - we see the issue you describe, where RichTextItems (and other CanvasItem-types) may not resize properly, even in a simplified/non-databound test.

We have a fix in the works and will update here when it hits nightly builds.

[michaelaveva]

Any update on this issue?

I have been able to work around the original issue I experienced but I still have the issue that you noticed where setting width/height on a RichTextItem (or its containing form) after it is drawn causes incorrect sizing after a redraw.

[Isomorphic]

Apologies for the delay - this one slipped through the priority net, but we'll revisit and update here shortly when the fix is in.

[Isomorphic]

We've added a fix for this. As of tomorrow's builds, dated June 23 and later, your sample code should work as-is, whether or not you call form.redraw().

The reason we suggested a redraw(), incidentally, was that you had drawn the form before adding the formItems - it was necessary to redraw the form with its new items before trying to manipulate their sizes. Had you added the formItems before calling draw(), you wouldn't have needed to call redraw().