Work Item form does not resize when DropDown control is used

[jonvest]

I created a very basic custom control that implements the DropDown control from azure-devops-ui. When the DropDown control is clicked, the form does not adjust so the contents are not visible - the drop down list is obscured by the fields on the work item form below it:

I tried calling the SDK resize method in various places but have not been able to get the form to resize.

I implemented a similar control with the older VSS SDK which does resize correctly, but the older SDK does not honor the themes used in AzDo so I need to use the newer SDK.

My repo (ignore the readme, I used the control sample repo as a starting point): https://github.com/jonvest/azure-devops-dropdown

[programaka]

I'm experiencing the same issue, where the height of the iframe is restricted by the parent component. The component provides just enough space to display the dropdown itself, but not the options. When the dropdown expands, the options are hidden.

I tried using the SDK.resize() method within the onExpand handler, calculating the height based on the number of options. However, since onExpand is a callback, the resize occurs after the dropdown expands, causing the options to be hidden on the first click and visible only on the second.

I also posted this issue on the Developer Community but was redirected back here.

const onDropdownExpand = () => {
    const dropdownHeight = Math.min(listData.length * 40, 600);
    SDK.resize(400, dropdownHeight + 100);
  };

const renderDropdown = () => {
    return (
      <Observer selection={dropDownSelection}>
        {() => {
          return (
            <Dropdown
              ariaLabel="Multiselect"
              actions={[
                {
                  className: "bolt-dropdown-action-right-button",
                  disabled: dropDownSelection.selectedCount === 0,
                  iconProps: { iconName: "Clear" },
                  text: "Clear",
                  onClick: async () => {
                    dropDownSelection.clear();
                    await saveSelected([]);
                  },
                  tooltipProps: {
                    text: "Clear",
                  },
                },
              ]}
              className="example-dropdown"
              items={convertItemsToListBoxItems(listData)}
              selection={dropDownSelection}
              onExpand={onDropdownExpand}
              onSelect={handleSelect}
              placeholder="Select an Option"
              showFilterBox={true}
            />
          );
        }}
      </Observer>
    );
  };

useEffect(() => {
    SDK.init({ loaded: false });

SDK.ready().then(async () => {
      SDK.register(SDK.getContributionId(), () => {
        return {};
      });

...

SDK.notifyLoadSucceeded();
    });
  }, []);

return (
    <div>
      {renderDropdown()}
      <div className="error"></div>
    </div>
  );