Input box is changing width to accommodate the clearable icon

[five1]

• What is the expected and current behavior?
  The text box is changing width to accommodate the clearable icon. My expectation is that the box remains a constant width.

• Steps to reproduce
  Render an input box with the clearable property set.
  <i-input v-model="value" clearable placeholder="Type something.." />

• Please tell us about your environment:

  • Version: >=3.2.2
  • Browser: Microsoft Edge for Business Version 117.0.2045.31 (Official build) (64-bit), Google Chrome Version 116.0.5845.188 (Official Build) (64-bit)
  • Language: TypeScript

• Other information
  I suggest that the combined width of the input and span (containing the clearable button) elements remain constant.

<div class="input"><!----><input placeholder="Global search" method="GET" id="searchBox" name="input-6wdiph4ia" type="text" tabindex="0" aria-disabled="false" aria-readonly="false"><span class="input-suffix"><!----><svg class="inkline-icon -md input-icon input-clear" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" role="button" aria-label="Clear" aria-hidden="false"><path fill="currentColor" d="M15.71 8.29a1 1 0 0 0-1.42 0L12 10.59l-2.29-2.3a1 1 0 0 0-1.42 1.42l2.3 2.29l-2.3 2.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l2.29-2.3l2.29 2.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42L13.41 12l2.3-2.29a1 1 0 0 0 0-1.42Zm3.36-3.36A10 10 0 1 0 4.93 19.07A10 10 0 1 0 19.07 4.93Zm-1.41 12.73A8 8 0 1 1 20 12a7.95 7.95 0 0 1-2.34 5.66Z"></path></svg></span></div>