Fix the issue that setting SelectedIndex before color picker initialize will not retain the selection

[jay-mao-cn]

What does the pull request do?

Fix the issue that setting SelectedIndex before color picker initialize will not retain the selection.

What is the current behavior?

Setting or binding SelectedIndex (e.g. 1) to color picker when it's not open, the result selection will always be the first tab (i.e. SelectedIndex == 0) after the color picker is open.

What is the updated/expected behavior with this PR?

Setting SelectedIndex before color picker initialize should retain the selection.

How was the solution implemented (if it's not obvious)?

Take the SelectedIndex into account when the color picker call ValidateSelection for the first time (after OnApplyTemplate).

Checklist

• Added unit tests (if possible)?
  Yes.
• Added XML documentation to any related classes?
• Consider submitting a PR to https://github.com/AvaloniaUI/avalonia-docs with user documentation

Breaking changes

N/A.

Obsoletions / Deprecations

N/A.

Fixed issues

Not reported.

[avaloniaui-bot]

You can test this PR using the following package version. 12.0.999-cibuild0058914-alpha. (feed url: https://nuget-feed-all.avaloniaui.net/v3/index.json) [PRBUILDID]

[cla-avalonia]

@rcjaymao,

Please read the following Contributor License Agreement (CLA). If you agree with the CLA, please reply with the following:

@cla-avalonia agree

Contributor License Agreement

Contribution License Agreement

This Contribution License Agreement ( “Agreement” ) is agreed to by the party signing below ( “You” ),
and conveys certain license rights to the AvaloniaUI OÜ ( “AvaloniaUI OÜ” ) for Your contributions to
AvaloniaUI OÜ open source projects. This Agreement is effective as of the latest signature date below.

1. Definitions.

“Code” means the computer software code, whether in human-readable or machine-executable form,
that is delivered by You to AvaloniaUI OÜ under this Agreement.

“Project” means any of the projects owned or managed by AvaloniaUI OÜ and offered under a license
approved by the Open Source Initiative (www.opensource.org).

“Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any
Project, including but not limited to communication on electronic mailing lists, source code control
systems, and issue tracking systems that are managed by, or on behalf of, the Project for the purpose of
discussing and improving that Project, but excluding communication that is conspicuously marked or
otherwise designated in writing by You as “Not a Submission.”

“Submission” means the Code and any other copyrightable material Submitted by You, including any
associated comments and documentation.

2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any
Project. This Agreement covers any and all Submissions that You, now or in the future (except as
described in Section 4 below), Submit to any Project.

3. Originality of Work. You represent that each of Your Submissions is entirely Your
original work. Should You wish to Submit materials that are not Your original work,
You may Submit them separately to the Project if You (a) retain all copyright and
license information that was in the materials as you received them, (b) in the
description accompanying your Submission, include the phrase "Submission
containing materials of a third party:" followed by the names of the third party and any
licenses or other restrictions of which You are aware, and (c) follow any other
instructions in the Project's written guidelines concerning Submissions.

4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else
for whom You are acting in making Your Submission, e.g. as a contractor, vendor, or agent. If Your
Submission is made in the course of Your work for an employer or Your employer has intellectual
property rights in Your Submission by contract or applicable law, You must secure permission from Your
employer to make the Submission before signing this Agreement. In that case, the term “You” in this
Agreement will refer to You and the employer collectively. If You change employers in the future and
desire to Submit additional Submissions for the new employer, then You agree to sign a new Agreement
and secure permission from the new employer before Submitting those Submissions.

5. Licenses.

a. Copyright License. You grant AvaloniaUI OÜ, and those who receive the Submission directly
or indirectly from AvaloniaUI OÜ, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable
license in the Submission to reproduce, prepare derivative works of, publicly display, publicly perform,
and distribute the Submission and such derivative works, and to sublicense any or all of the foregoing
rights to third parties.

b. Patent License. You grant AvaloniaUI OÜ, and those who receive the Submission directly or
indirectly from AvaloniaUI OÜ, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license
under Your patent claims that are necessarily infringed by the Submission or the combination of the
Submission with the Project to which it was Submitted to make, have made, use, offer to sell, sell and
import or otherwise dispose of the Submission alone or with the Project.

c. Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement.
No additional licenses or rights whatsoever (including, without limitation, any implied licenses) are
granted by implication, exhaustion, estoppel or otherwise.

6. Representations and Warranties. You represent that You are legally entitled to grant the above
licenses. You represent that each of Your Submissions is entirely Your original work (except as You may
have disclosed under Section 3 ). You represent that You have secured permission from Your employer to
make the Submission in cases where Your Submission is made in the course of Your work for Your
employer or Your employer has intellectual property rights in Your Submission by contract or applicable
law. If You are signing this Agreement on behalf of Your employer, You represent and warrant that You
have the necessary authority to bind the listed employer to the obligations contained in this Agreement.
You are not expected to provide support for Your Submission, unless You choose to do so. UNLESS
REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, AND EXCEPT FOR THE WARRANTIES
EXPRESSLY STATED IN SECTIONS 3, 4, AND 6 , THE SUBMISSION PROVIDED UNDER THIS AGREEMENT IS
PROVIDED WITHOUT WARRANTY OF ANY KIND, INCLUDING, BUT NOT LIMITED TO, ANY WARRANTY OF
NONINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.

7. Notice to AvaloniaUI OÜ. You agree to notify AvaloniaUI OÜ in writing of any facts or
circumstances of which You later become aware that would make Your representations in this
Agreement inaccurate in any respect.

8. Information about Submissions. You agree that contributions to Projects and information about
contributions may be maintained indefinitely and disclosed publicly, including Your name and other
information that You submit with Your Submission.

9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the Republic of Estonia, and
the parties consent to exclusive jurisdiction and venue in the courts sitting in Talinn,
Estonia. The parties waive all defenses of lack of personal jurisdiction and forum non-conveniens.

10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and
supersedes any and all prior agreements, understandings or communications, written or oral, between
the parties relating to the subject matter hereof. This Agreement may be assigned by AvaloniaUI OÜ.

AvaloniaUI OÜ dedicates this Contribution License Agreement to the public domain according to the Creative Commons CC0 1.

[jay-mao-cn]

@cla-avalonia agree

[jay-mao-cn]

Is the test failure due to environment issues?

[Gillibald]

Initial selection is usually handled by ISupportInitialize, so ColorView should be using that

[robloo]

This needs to be very carefully reviewed. When I last looked at it the issue wasn't correctly fixable in the ColorPicker.

1. First this issue is ONLY for the ColorPicker, ColorView works fine
2. This is because the underlying problem is flyout life cycle. When Avalonia is applying styles and running validation the flyout doesn't exist yet. I do think this is a general issue in Avalonia itself.
3. TabControl is also doing things it shouldn't. TabControl is allowing tabs to be visible and selected when they are in fact collapsed/hidden. That's a bug in the tab control.

It's likely we need two fixes here: first for tabcontrol to handle selection properly. Second for Avalonia's flyout lifecycle.

[jay-mao-cn]

So what should I do next? Discard the changes and wait for new created bugs to be fixed? Or continue to submit as a workaround as of now?

[robloo]

@jay-mao-cn I'll look at this more in the next few days. This may be a valid work-around for the flyout lifecycle part of the problem (I doubt that one will even be discussed anytime soon at the framework level).

I still think we should fix TabControl as well though. It shouldn't show invisible tabs in any circumstances.

[jay-mao-cn]

OK, thanks, looking forward to your feedback.

[jay-mao-cn]

Hi @robloo , is there any update about this issue? thanks.

[robloo]

@jay-mao-cn Sorry, I will look at it more this week. Just haven't found the time yet.

[robloo]

@jay-mao-cn While this may improve things with code-behind usage it does not fix the issue (It doesn't work in XAML). I tested in control catalog with the following modifications (and your code in this PR):

      <ColorPicker Width="150"
                   VerticalContentAlignment="Center"
                   HsvColor="hsv(120, 1, 1)"
                   IsColorSpectrumVisible="False"
                   IsColorComponentsVisible="False"
                   Margin="0,50,0,0">
        <ColorPicker.Content>
          <TextBlock Text="{Binding $parent[ColorPicker].Color}" 
                     Foreground="{Binding $parent[ColorPicker].Color, Converter={StaticResource ToBrushConverter}}"></TextBlock>
        </ColorPicker.Content>
      </ColorPicker>

Note the addition of:

IsColorSpectrumVisible="False"
IsColorComponentsVisible="False"

This does something special: It disables/hides tab 0 (color spectrum) and tab 2 (color components). The default selected index of the control will be tab 0. So we can see the problem when opening the flyout:

The issue is visible here. Tab index 0 is selected and visible... however, that tab is turned off. The top tabs in the TabStrip are actually correct and it only shows the color palette tab there.

There are the following issues:

1. Tab visibility is controlled by bindings in the control template... those bindings ARE NOT evaluated when OnApplyTemplate is called. The bindings are only updated when the flyout is opened the first time which is far too late. This is an issue only in the ColorPicker due to the flyout lifecycle (ColorView is fine).
2. The TabControl itself should never allow this case. It's missing internal validation logic. If a tab is hidden it shouldn't be visible. I haven't compared this to WPF though.

I honestly think if we just fix number 2 with the TabControl validation it will take care of this problem in the ColorPicker. At least hide it from the end user.

To fix this in the ColorPicker itself requires either:

1. Knowing when the bindings update the tab visibility in the TabControl and only running validation selection after that is done
2. Completely ignoring tab visibility set through bindings, just recalculate which tabs should be visible in code behind. This would allow us to have this information before the UI does and validate correctly. I do NOT recommend doing this in case control authors re-template the control. It creates a tight dependency on ONLY the tabs we have defined in the vanilla implementation.
3. We can detect when the Flyout is opening and try to run the validation logic there rather than in OnApplyTemplate
4. Discuss with the core team and figure out if there is a way we can force bindings to update even when the flyout isn't open yet.

[robloo]

To validate this I have a hack-fix that does solve the problem. I'm not comfortable making this the actual fix because:

1. It's making the ColorView aware of ColorPicker-specific information (The Flyout/DropDownButton)
2. It's adding one more template part that control/theme authors really don't need
3. It only works in Opened rather than Opening which is after things are visible to the user. In the extreme it may cause a flicker. Opening doesn't work because the bindings aren't evaluated yet.

        /// <inheritdoc/>
        protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
        {
            if (_hexTextBox != null)
            {
                _hexTextBox.KeyDown -= HexTextBox_KeyDown;
                _hexTextBox.LostFocus -= HexTextBox_LostFocus;
            }

            _dropDownButton = e.NameScope.Find<DropDownButton>("PART_DropDownButton");
            _hexTextBox = e.NameScope.Find<TextBox>("PART_HexTextBox");
            _tabControl = e.NameScope.Find<TabControl>("PART_TabControl");

            if (_dropDownButton is not null &&
                _dropDownButton.Flyout is Flyout flyout)
            {
                flyout.Opened += Flyout_Opened;
            }

            SetColorToHexTextBox();

            if (_hexTextBox != null)
            {
                _hexTextBox.KeyDown += HexTextBox_KeyDown;
                _hexTextBox.LostFocus += HexTextBox_LostFocus;
            }

            base.OnApplyTemplate(e);
            ValidateSelection();
        }

        private void Flyout_Opened(object? sender, EventArgs e)
        {
            ValidateSelection(true);
        }

[jay-mao-cn]

Thanks @robloo , I will check it closely.

[Gillibald]

Initial selection is usually handled by ISupportInitialize, so ColorView should be using that

This fixes the XAML issue

[robloo]

@Gillibald Thanks for looking at this.

How does that interface fix the issue? The problem is the bindings in the Flyout aren't evaluated until the flyout is opened the first time. This is well after ISupportInitialize EndInit() is called.

This isn't like other controls where we have to batch property sets together. The issue is simply Flyout lifecycle with deferred bindings.