Setting Field Errors for Empty Selections in fw-select Component - Seeking Community Guidance

[Gopi]

Hi team,

I’m currently working on a project using the fantastic fw-select component, and I’m looking for some guidance on handling field errors when no value is selected in the field.

Here’s a snippet of the code I’ve been working with:

const issueFieldsSelectorRef = useRef(null);
const getSelectedValues = (ref) => ref?.current?.value;

const components = [
  { ref: issueFieldsSelectorRef, key: "selectedIssueFields" },
];

const selectedValues = components.reduce((acc, { ref, key }) => {
  acc[key] = getSelectedValues(ref);
  return acc;
}, {});

if (!selectedValues.selectedIssueFields.length) {
  issueFieldsSelectorRef.current.setFieldErrors("Fields cannot be empty");
}

<fw-select
  id="field"
  ref={issueFieldsSelectorRef}
  label="fields"
  placeholder="Select fields"
  multiple
  required
  error={fieldError}
></fw-select>;

In attempting to set a field error for empty selections, I encountered a "TypeError: Cannot read properties of null (reading 'style')" error when using document.getElementById('jira-field').style.border = '2px solid red';.

I would greatly appreciate any insights or alternative approaches from the community on how to effectively set field errors for empty selections in the fw-select component.

Thank you in advance for your assistance! Your expertise and suggestions are highly valued.

[Saif (Saif Ali Shaik)]

How about trying to do something like this:

var selectElement = document.getElementById('select')

selectElement.addEventListener("fwChange", (e)=>{
	console.log(selectElement.value)
	if(selectElement.value){
		console.error("atlead one selection required")
		selectElement.hintText = "atleast one selection";
		selectElement.forceSelect = true;
	}
})