StylesCombo plugin doesn't show the right item in the dropdown if it has same elements with and without class

Problem/Motivation

In CKEditor if you are using styles dropdown which has same elements with and without class then the item which has no class will be shown as selected always, but the functionality in WYSIWYG works as expected.

For example,

h2|H2
h2.black|H2 Black
h2.orange|H2 Orange

it will always shows h2 as selected even if you choose h2.black from the dropdown, but it formats the text in the WYSIWYG as h2.black, so the issue is only in the dropdown.

It works as expected if you change the order of the list in such a way that the element which has class comes first as listed below,

h2.black|H2 Black
h2.orange|H2 Orange
h2|H2

Steps to reproduce

1. Edit Full Html text format
2. Add "Styles" button to your "Active Toolbar"
3. Add the below list to "Styles dropdown" and save it,
h2|H2
h2.black|H2 Black
h2.orange|H2 Orange
4. Create or Edit a content and choose the body field format as "full html"
5. Type and select a text in the WYSIWYG and format it with "H2 Black" using "styles" dropdown. You can see the dropdown still shows "H2" instead of "H2 Black". But if you check the WYSIWYG you can see it formatted with h2.black.

Proposed resolution

Bugfix

Remaining tasks

Bugfix

User interface changes

None

API changes

None

Data model changes

Release notes snippet

None