Dropdown "action" as a custom function with "set text" not updating correctly

[Mike-Logit]

Bug Report

I have just switched from SemanticUI to FomanticUI using the same code as shown in the snippet and the set text behavior no longer updates the text of the dropdown. I have heard that set text might be used behind the scenes for the FomanticUI dropdown component but all solutions tell me to use onCallback instead, but I can't get this approach to work. I would rather the action be fixed so I can continue to use it, if possible.

Steps to reproduce

1. Create a select element with the "ui search selection dropdown additions" classes.
2. initialize the dropdown with allowAdditions set to true and action set to a custom function that triggers set text and set value behaviors to manually set the text and value of the dropdown .

Expected result

The text of the Dropdown component should be set and rendered to the value passed to the call that triggered set text.

Actual result

The dropdown's text element remains empty.

Testcase

This shows the issue using FomanticUI: https://jsfiddle.net/mikelogit/874caudh/7/

This is the same code but using SemanticUI (and works): https://jsfiddle.net/mikelogit/eu8s6fyL/1/

The custom action callback is used to intercept a value provided by the user in the search box. It checks to see if the entered value is the same as the text, and if so, it updates the value by dividing it by the integer value assigned to the data-precision attribute. Also, the text is formatted to include commas for large numbers.

For example, if the user enters "5500" it should set the text to "5,500" and set the value to "5.5" (when data-precision="1000"). If an already existing dropdown value is selected, only the text is formatted and updated, and the new value is set without any changes.

Screenshot (if possible)

This is with SemanticUI when it worked correctly:

But now it's just plank, although the set value behavior does seem to work. It's just the text that appears missing:

Version

[email protected]

[lubber-de]

Thanks for reporting.

For the record: Difference of the set text behavior is caused by #17 via c296538616b4d1d8522dd81bbccb9df84bc71cb6 It was implemented as a fix for https://github.com/Semantic-Org/Semantic-UI/issues/6285 to reflect the docs at https://semantic-ui.com/modules/dropdown.html#specifying-select-action

We'll investigate further how to fix/support using "set text" as a custom function (quick idea: enhance the set text function to support some kind of "force" parameter which will ignore the action setting or always set it when action is a custom function....... but we need to test this a bit more

[Mike-Logit]

For anyone else having the same issue, I used javascript/jquery to find the .text sibling element of the dropdown and then set the text content myself and avoided using "set text".

For example:

const textElement = dropdown.siblings(".text");
textElement.text(newText);

It would be good for this to be fixed to avoid others using this behavior by mistake, alternatively update the documentation to explain when you shouldn't use it.

Thanks for investigating the issue, and good luck :)

[lubber-de]

Fixed by #2958 See your adjusted jsfiddle here https://jsfiddle.net/lubber/6u8etwf3/1/

[Mike-Logit]

@lubber-de wow, that was impressively fast! Nice job. Thank you very much!

EDIT: I'll let you close this when you're ready/it's merged.

[Mike-Logit]

Has this been released yet? I wouldn't mind updating the library soon. Thanks!

[lubber-de]

It's available via npm nightly beta or jsdelivr beta cdn https://fomantic-ui.com/introduction/getting-started.html#installing-via-npm https://fomantic-ui.com/introduction/getting-started.html#using-a-cdn-provider https://fomantic-ui.com/introduction/getting-started.html#updating-cdn

Just use nightly instead of 2.9.3