[Dropdown] search text cut off in Edge

[y0hami]

Bug:
On Microsoft Edge when adding a new entry to search dropdown the text cuts off at start. Please see the video below for clarification

https://jmp.sh/lvX8aN0

Steps

1. Open https://jsfiddle.net/xjaus15o/ in MS Edge
2. Click inside Dropdown.
3. type foo
   Notice the f of foo is cut off from the start.

Expected Result

f of foo should not be cut off from the start.

Actual Result

f of foo is cut off from the start.

Version

2.4.2

Testcase

Open https://jsfiddle.net/xjaus15o/

Original Issue: Semantic-Org/Semantic-UI#6713

[hassam7]

@hammy2899 This ticket has good first issue label. Can I get a little guidance approaching this ticket?

[y0hami]

@hassam7 Sure 😃

So as far as I'm aware the bug is due to Edge not returning the same width value as other browsers (https://jsfiddle.net/7n5qwm0L/) and therefore it sets the input box width 1px too little so it cuts the text off. If you keep typing letters you will see that the text "jumps" around and some amounts its fine and some it isn't.

A simple fix would be to change this https://github.com/fomantic/Fomantic-UI/blob/master/src/definitions/modules/dropdown.js#L1744 to add 2px instead of 1px but if you can think of any other way feel free.

[hassam7]

I tried it by setting 2px but the text was still cutting. Adding 3 to $sizer.width() worked.

[hassam7]

@hammy2899 I looked into the issue. It exists on Chrome too. Here is link to video. Turns out the issue is due to miscalculation of width value from of the $sizer.width().

The code below fixes it. Do you have any comments or suggestions?

searchWidth: function(value) {
            value = (value !== undefined)
              ? value
              : $search.val()
            ;
            $sizer.text(value);

            $sizer.css({
              width: '100%',
            });
            var width = $sizer.width() + 1;
            $sizer.css({
              width: 'auto',
            });
            // prevent rounding issues
            return Math.ceil(width);
          },

[j055]

Is there a fix for this? Still seems to be an issue in Edge.

Try typing in here:
https://fomantic-ui.com/modules/dropdown.html#multiple-search-selection

[lubber-de]

This seems to fix it as well without the need to change the JS as suggested above

.ui.dropdown .sizer {
  width:100%;
}

[Edit] 🤔 this seems to break the tab completion on multiple tag selections, the JS change might be better approach ... However; Edge is dead...