How to remove the previously selected item Highlight.

125

Alex P posted over 3 years ago

I am wondering what controls the highlighted item after user selects an item in virtual drop down.
I want to be able to not show what was previously selected. How can i do that ?

Can you please advise based on this sample you provide

https://ko.infragistics.com/products/ignite-ui-angular/angular/components/drop-down-virtual

Also how can i remove the scrolling if the items fit into the max size of the dropdown. So what i am looking for is to \
dynamically show the dropdown with the size required and if it is above the max size specified i want to scroll

2680

Offline Bozhidara Pachilova posted over 3 years ago in reply to Alex P

Hello Alex,

Thank you for providing more details regarding your use case. Now that you mention that the IgxDropDown is to be used as a menu, I believe you will find this section of our documentation very helpful.

The drop-down can easily be configured to behave as a menu by setting the selectionChanging event’s arguments cancel member to true. In this way, the selected item is not preserved when opening the menu and previous selections get invalidated. Nevertheless the selected item can be accessed via the newSelection member of the event args. Also, there is no need to modify any styles.

In the referenced topic you will also find a sample demonstrating this scenario. Additionally, as it has been a while since this thread was posted, the previously referenced onSelection event of the IgxDropDown has been renamed to selectionChanging since version 12.1.0. You can find a complete list of the introduced changes in our Changelog in GitHub here.

Sincerely,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel
125

Offline Alex P posted over 3 years ago in reply to Bozhidara Pachilova

Looking at the provided Sample it still shows the previously selected one.

Yes your code fixed the focus one but it still shows what was previously selected which is ok if you use the control to set value but if you use it as a pop up menu it is not desired. So what style do i have to modify to get rif of the background color ?
Cancel
Reply

Cancel
2680

Offline Bozhidara Pachilova posted over 3 years ago in reply to Alex P

Hello Alex,

Thank you for following up.

I have been looking into your question about the previously selected item being highlighted in the virtual drop-down and I would like to ask you to please, confirm if you the below gif captures the described behavior:

It demonstrates the drop down from the first sample in the Virtual Drop Down topic, as pointed by you. I observe the previously selected item indeed being slightly highlighted for a very brief moment. Is this the highlight that you are referring to?

If so, I determined that this is caused by the previously selected item receiving focus for this small quant of time. In this case, my suggestion is to modify the drop-down item’s focused background and text colors, so that no change in the previously selected item upon opening would be observed. I modified the previously suggested sample to illustrate how this can be achieved by using the Ignite UI for Angular Theming capabilities. Please, test the sample on the same link here and let me know if it correctly addresses the issue.

For detailed information about styling the IgxDropDown, I recommend checking out the Styling guide here. Additionally, I believe you will find the list with exposed igx-drop-down-theme css variables for styling here useful.

If you require any further assistance on the matter, please let me know.

Best regards,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel
125

Offline Alex P posted over 3 years ago in reply to Bozhidara Pachilova

Maybe my question was not clear so i apologize. I was not referring on how to remove the actual previously selected item in the dropdown. What i want is to change the current behavior and not highlight the previously selected Item if the user calls drop down after making a previous selection. Currently its this light red bar which highlights what was selected before, that's what i want to be able to remove / not show
Cancel
Reply

Cancel
2680

Offline Bozhidara Pachilova posted over 3 years ago

Hello Alex,

Thank you for reaching out.

I have been looking into your question about not showing the previous selection and I would like to ask you to please, provide some more details regarding this requirement. Only the currently selected item gets highlighted in the drop down, which is simply a means of indicating that it is indeed selected. Currently, there does not seem to be an indicator that some other item was previously selected. Is by chance your requirement that you wish to remove an item from the list, when the selection changes to another item?

Generally, the IgxDropDown exposes an onSelection event, from whose event arguments you can access the oldSelection and newSelection objects.

To address your second question, I have modified the first sample from the referenced topic to demonstrate how hiding the scrollbar, when it is not needed can be achieved. Firstly, I have decreased the number of generated items for the list to 5 by tweaking the for loops’, which serve for generating the example items, indexes. So, the scrollbar will not appear, if a css height property (instead of max-height) is set on the IgxDropDownItem’s wrapping div (the div with class drop-down-virtual-wrapper in the case of the sample).

You can find the modified sample here. You could check the scrollbar appearing for more than 5 items (where their height exceeds the specified div height of 240px) by changing the inner for loop’s j index to some greater value.

Please, test it on your side and if you require any further assistance on the matter, please let me know.

Best regards,
Bozhidara Pachilova
Associate Software Developer
Cancel
Reply

Cancel