Use handleName field consistently in HandleController

[peterjanes]

Description

There are two instances of handle.name that should be handle.handleName so that the handle map is populated correctly.

Related issue(s)

• [Bug]: sp-slider only adds one sp-slider-handle when multiple are defined #2035

Motivation and context

I haven't nailed down the exact conditions, but sometimes when adding sp-sliders dynamically from an HTML template only one instance of sp-slider-handle will be added because the handle map key is undefined. (I finally tracked down the behaviour when I started getting First slider handle cannot have attribute min="previous" after adding max="next" to the first sp-slider-handle and min="previous" to the second.)

How has this been tested?

I'm afraid I don't have a reduced test case, but I was able to track down the behaviour in my (currently non-public) app. The code does something like this (which doesn't reproduce the issue in isolation, but is fixed by the change in this PR):

const sliders = document.createElement('div');
arr.forEach(parms => {
  const el = sliderTemplate.content.cloneNode(true);
  const slider = el.querySelector('sp-slider');
  slider.setAttribute('label', parms.description);
  slider.querySelector('[name=min]').setAttribute('value', parms.min);
  slider.querySelector('[name=max]').setAttribute('value', parms.max);
  sliders.appendChild(slider);
});
document.body.appendChild(sliders);

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[Westbrook]

This seems weird in that handle.handleName is only a getter for handle.name...

[Westbrook]

spectrum-web-components/packages/slider/src/SliderHandle.ts

Lines 80 to 82 in d23f735

	public get handleName(): string {
	return this.name;
	}

[peterjanes]

Yeah, I can't explain it. My template looks like this, i.e. there's definitely a name there:

  <sp-slider variant="range" step="1">
    <sp-slider-handle slot="handle" name="min" label="Minimum" max="next"></sp-slider-handle>
    <sp-slider-handle slot="handle" name="max" label="Maximum" min="previous"></sp-slider-handle>
  </sp-slider>

(The slider's min/max attributes and the handles' value attributes are filled in when processing the template.)

[peterjanes]

Should've said, my "fix" is wrong (in editing the PR description while I was waiting for CLA approval I removed that minor detail) but I'm not sure why the handle's name property isn't being initialized properly.

[Westbrook]

Could you share into the issue more info around how you add the DOM to the page, etc.?

As this change isn't right, let's close this PR and discuss finding the source of this in the issue.

[Westbrook]

Let's look more for a source before we review a fix.