Widget API does not reflect the change of Text width from fixed value to "hug-content" on the layer

I am trying to add a function to a widget I am currently developing that changes the width of text with the touch of a button.
I have implemented this so that the width of the text is held in a variable using useSyncedState and can be switched between a fixed value and “hug-content”.
If width is a fixed value, it works as expected, but when switching from a fixed value to “hug-content”, it is not reflected in the width of the Text layer.
Here is the sample code.

const { widget } = figma
const { useSyncedState, AutoLayout, Text} = widget

function Widget() {
  const [textWidth, setTextWidth] = useSyncedState<WidgetJSX.AutolayoutSize>('textWidth', 'hug-contents')

  return (
    <AutoLayout
      direction="vertical"
    >
      <Text 
        fill={"#cc0000"}
        onClick={() => {
          if(textWidth === 'hug-contents'){
            setTextWidth(300)
          }else{
            setTextWidth('hug-contents')
          }
        }}
        >
          {'textWidth = ' + textWidth}
      </Text>
      <Text width={textWidth}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      </Text>
    </AutoLayout>
  )
}

widget.register(Widget)

The following is the result.

You can see that the value of the textWidth variable is not reflected as expected.
Is this a bug in the WidgetAPI?

1 Like