I use a Select on a Macro Config for Confluence. My goal is to display a JIRA ticket search field when the user enters more than three characters then the possible values are displayed.
I use onInputChange to get value enter by user but the problem is value always null. I tried this simple code and nothing happen in console log when I write something in select field:
<Select
name="jiraKey"
isSearchable="true"
onInputChange={(query) => console.log("Value enter by user:", query)}
/>
My full config code
const Config = () => {
const [jiraIssues, setJiraIssues] = useState([]);
const [searchValue, setSearchValue] = useState("");
useEffect(() => {
const fetchJiraIssues = async () => {
if (searchValue.length > 2) {
try {
console.log("Fetching Jira issues for search value:", searchValue);
const response = await api
.asUser()
.requestJira(`/rest/api/3/search?jql=summary~"${searchValue}"`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
const data = await response.json();
console.log("Fetched Jira issues:", data.issues);
setJiraIssues(
data.issues.map((issue) => ({
label: `${issue.key}: ${issue.fields.summary}`,
value: issue.key,
})) || []
);
} catch (error) {
console.error("Failed to fetch Jira issues:", error);
}
}
};
fetchJiraIssues();
}, [searchValue]);
return (
<>
<Label labelFor="textfield">Jira key :</Label>
<Select
name="jiraKey"
isSearchable="true"
onInputChange={(query) => setSearchValue(query)}
options={jiraIssues}
/>
</>
);
};