fix: revert to old behavior but properly generate picker labels

[zewa666]

fixes #1605

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.8%. Comparing base (f03cc6c) to head (e68bc6b).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff            @@
##           master   #1606     +/-   ##
========================================
- Coverage    99.8%   99.8%   -0.0%     
========================================
  Files         198     198             
  Lines       21795   21794      -1     
  Branches     7303    7159    -144     
========================================
- Hits        21734   21733      -1     
+ Misses         61      55      -6     
- Partials        0       6      +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ghiscoding]

could you also remove the options prop above cloneNode?: boolean; since it's no longer needed

[ghiscoding]

so I had a very similar approach but I think it would be better to go with mine instead, because with yours, you forgot to deal with the line 280. So I think it's better to first extract the column name for all other usage as shown below

Suggested change

	function pickerHeaderColumnValueExtractor(column: Column, gridOptions?: GridOption) {
	let colName = column?.name ?? '';
	if (colName instanceof HTMLElement || colName instanceof DocumentFragment) {
	colName = colName.textContent || '';
	}
	const headerGroup = column?.columnGroup || '';
	const columnGroupSeparator = gridOptions?.columnGroupSeparator ?? ' - ';
	if (headerGroup) {
	return headerGroup + columnGroupSeparator + colName;
	}
	return colName;
	}

[ghiscoding]

@zewa666 oh I'm not sure why you closed your PR?

I had another possible problem with the .textContent, this will read all element texts but is that really ideal though? I mean I just tested this with an HTML element that has some text and a button with text and it gives me what is shown below (the button text is also pulled). However, I'm not sure that we can do much about it?!?

that is using the following code

const div = document.createElement('div');
    const button = document.createElement('button');
    button.className = 'button button-small';
    button.textContent = 'click';
    button.addEventListener('click', () => alert('hi'));
    div.appendChild(document.createTextNode('Column 1 '));
    div.appendChild(button);

    this.columnDefinitions = [
      {
        id: 'sel', name: div, field: 'num', width: 80, type: FieldType.number,
        excludeFromExport: true,
        resizable: true,
        filterable: true,
        selectable: false,
        focusable: false
      },