[EuiSkipLink] Allow consumer onClicks to be called even if no valid…

… destination or fallback destination exists (#6355)

* Allow consumers to skip/pass empty strings for both destinationId and fallbackDestination and call their own custom `onClick` scroll/focus logic

* changelog

src/components/accessibility/skip_link/skip_link.test.tsx

@@ -120,6 +120,28 @@ describe('EuiSkipLink', () => {
         expect(onClick).toHaveBeenCalled();
       });
 
+      test('is called even when no valid destination exists', () => {
+        const onClick = jest.fn(() =>
+          document.querySelector('button')!.focus()
+        );
+        const { getByText } = render(
+          <>
+            <EuiSkipLink
+              destinationId=""
+              fallbackDestination=""
+              onClick={onClick}
+            >
+              Test
+            </EuiSkipLink>
+            <button />
+          </>
+        );
+        fireEvent.click(getByText('Test'));
+
+        expect(onClick).toHaveBeenCalled();
+        expect(document.activeElement?.tagName.toLowerCase()).toEqual('button');
+      });
+
       test('does not override overrideLinkBehavior', () => {
         const onClick = jest.fn();
         const { getByText } = render(

src/components/accessibility/skip_link/skip_link.tsx

@@ -94,16 +94,19 @@ export const EuiSkipLink: FunctionComponent<EuiSkipLinkProps> = ({
     setHasValidId(false);
 
     // If no valid element via ID is available, use the fallback query selectors
-    const fallbackEl = document.querySelector<HTMLElement>(fallbackDestination);
-    if (fallbackEl) {
-      setDestinationEl(fallbackEl);
+    if (fallbackDestination) {
+      const fallbackEl = document.querySelector<HTMLElement>(
+        fallbackDestination
+      );
+      if (fallbackEl) {
+        setDestinationEl(fallbackEl);
+      }
     }
   }, [destinationId, fallbackDestination]);
 
   const onClick = useCallback(
     (e: React.MouseEvent<HTMLAnchorElement>) => {
-      if (overrideLinkBehavior || !hasValidId) {
-        if (!destinationEl) return;
+      if ((overrideLinkBehavior || !hasValidId) && destinationEl) {
         e.preventDefault();
 
         // Scroll to the top of the destination content only if it's ~mostly out of view

upcoming_changelogs/6355.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- `EuiSkipLink` now correctly calls `onClick` even when `fallbackDestination` is invalid