Dragging a list item with a specific input contained within it casues a console error

[BennyBaruba]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

We use a list and list items to create new report fields and reorder them in the Mission Manger app of ArcGIS Mission. If the user clicks on the pencil in the screenshot to activate the field title input and then clicks to the drag handle for any report field to re-order the field. The console error in the last screenshot is thrown. The console error does not affect the usability of the UI.

Step 1

Step 2

Step 3

Expected Behavior

User should be able to switch focus to the input and then drag and drop another List Item. Without getting a console error.

Reproduction Sample

See steps below...

Reproduction Steps

The following is the code we are using. Default state shows the field label as text. Then when the user clicks on the pencil edit button it turns into a input with either the untitled field label or user defined title.

I also noticed this in the help

We have actionable content in the content slot. Might that be one of the reasons why the console is coming up? Other than the console coming up the list item appears to be working for our use in the MIssion report area of the app.

 const inlineEditableHolder = (field.fieldEditing || labelError) && (
      <div
        class={this.classes(
          flex.boxCFsFs,
          sizing.width100,
          leaders.leaderHalf,
          margins.marginRightQuarter,
          CSS.inputFieldLabelHeight
        )}
      >
        {inlineEditable}
        <div class={this.classes(flex.boxRFsFs)} key={fieldKey}>
          {fieldLabelCharacterCount}
        </div>
      </div>
    );

    const button = Button({
      label: this._t9n.edit,
      iconStart: "pencil",
      scale: "m",
      appearance: "transparent",
      kind: "neutral",
      onClick: () => {
        field.fieldEditing = true;
      }
    });

    const untitledField = !field.fieldEditing && !labelError && (
      <div class={this.classes(flex.boxRFsCtr)}>
        <span
          class={this.classes(
            margins.marginRightQuarter,
            fontSizes.fontSizeMinus1,
            text.textLeft
          )}
        >
          {field.label || this._t9n.untitledField}
        </span>
        {button}
      </div>
    );

Reproduction Version

2.8.0 (April 2024)

Relevant Info

Regression?

no

Priority impact

p2 - want for current milestone

Impact

minor

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Mission

[driskull]

Hi @BennyBaruba I'm not seeing the console error when using a codepen. Are you able to provide a reproduction?

https://codepen.io/driskull/pen/mdYOvev?editors=1000