Editor Widget Text Area Inputs

[dcarson1661]

Hello,

I’m working in API V 4.20. I’m trying to make a text-area input in the Editor Widget. I currently have this implemented using the (editorType : “text-area”) property, but I’m experiencing some behavior I don’t understand. I get a text area field, but it will only expand horizontally when grabbing the handle shown below.

I noticed that the editorType property has been deprecated, but I have not been able to achieve the same effect using the suggested workflow below. Does anyone know how to allow the text area to expand vertically as well? Or how to implement TextAreaInput?

Thank You!

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureForm-FieldConfig.h...

“editorType String

Since: ArcGIS API for JavaScript 4.10

Deprecated since version 4.16

The type of editor to use for string field types. Possible values are in the table below. The preferred way to set the editor type is via TextAreaInput or TextBoxInput classes set within the field element of a FeatureForm's template.”

Here is my current Editor Widget

          // Edit widget
          const editor = new Editor({
          view: view,
          container: "sidePanel",
          allowedWorkflows: ['create','update'],
          layerInfos: [{
            layer: 'layer,
            fieldConfig: [
              {
            name: "LOCATION",
            label: "Location",
            editorType: "text-area"
            }
      ],
      deleteEnabled: false 
          }]

[JeffreyWilkerson]

When I setup my Editor at 4.20, I'm using the 'stringFieldOption' attribute to set the field type to "text-area", which I think predetermines the editor to adjust to it.

editor = new Editor({
    view: view,
    allowedWorkflows: ["update"], // allows only updates and no adds
    layerInfos: [{
        layer: busStopLayer,
        fieldConfig: [
        {
            label: "Location",
            initialState: "collapsed",
            description: "General location information",
            fieldConfig: [
                { name: "Location", label: "Location" },
                { name: "Owner", label: "Owner" }
            ]
        },
        {
            label: "Structure",
            initialState: "collapsed",
            description: "Information about the bus stop",
            fieldConfig: [
                { name: "StopType", label: "Type of Stop" },
                { name: "Condition", label: "Condition Assesment" },
                { name: "ConditionDate", label: "Date of Condition Assessment", formatter: formatTimestamp },
                { name: "Comments", label: "Add any general comments", stringFieldOption: "text-area" }
             ]
        },
        enabled: true
    }],
    container: "editDiv",
});
view.ui.add("editDiv", { position: "top-right", index: 2 });

[dcarson1661 · Accepted solution]

I got this figured out. Adding the below to my CSS allowed for resizing in both directions. 

        .esri-feature-form__input {
        resize: both !important;
        }