Auto-focus in filter model pop-up

rishumishra2001 · September 15, 2025, 12:58pm

Product: Web viewer

Product Version:11.4.0

Please give a brief summary of your issue:
I want to know how apryse is handling the auto-focus in filter model.

Please describe your issue and provide steps to reproduce it:
I want to know how apryse is handling the auto-focus in filter model.

Please provide a link to a minimal sample where the issue is reproducible:

system · September 15, 2025, 12:59pm

Hello, I’m AiRon, an automated tech support bot
While you wait for one of our customer support representatives, I can help you with your question.

The auto-focus feature in a modal, such as a filter model pop-up, typically involves setting focus to a specific input element when the modal is opened. In Apryse WebViewer, this can be managed using JavaScript by selecting the desired input element and calling its focus() method when the modal becomes visible.

Some things you can try:

Use JavaScript to select the input element in the modal you want to focus on.

Attach an event listener to the modal’s open event to trigger the focus() method on the input element.

Ensure the modal’s DOM elements are fully loaded before setting focus to avoid issues.

Check if there are any WebViewer UI customizations or event hooks that might affect modal behavior.

Here are some resources that might help you:

Full API for WebViewer - Learn about the full capabilities of WebViewer’s API.

Filters and streams using JavaScript - Understand how to implement and manage filters in PDFs.

View, Edit, Annotate, and Redact Attachments in Salesforce - Example of implementing WebViewer in a different environment which might offer insights.

What is WebViewer Server? - Information on server-side processing which might be useful if dealing with large documents.

Hopefully, this helps you solve your problem while you wait for a human to get back to you.

darian.chen · September 15, 2025, 3:49pm

Hello Rishu,

Thank you for contacting Apryse forums.

What aspect of the filter modal do you notice there is auto-focus?

Best Regards,
Darian

rishumishra2001 · September 16, 2025, 5:45am

Like I have use color filter. Next time when user open the filter, color section will open default.

darian.chen · September 16, 2025, 1:12pm

Hello Rishu,

Thank you for the response.

The component remembers the last selected tab (like the color tab) via Redux, so when you reopen the modal, it automatically displays the same tab. Our UI publicly available, so you can take a look at the component below:

github.com/ApryseSDK/webviewer-ui

src/components/FilterAnnotModal/FilterAnnotModal.js

06ee60b71


      
          import './FilterAnnotModal.scss';
          
          const TABS_ID = 'filterAnnotModal';
          
          const FilterAnnotModal = ({ isInFormBuilderMode }) => {
            const [isDisabled, isOpen, colorMap, selectedTab, annotationFilters,
              isMeasurementAnnotationFilterEnabled, customNoteFilter] = useSelector((state) => [
              selectors.isElementDisabled(state, DataElements.FILTER_MODAL),
              selectors.isElementOpen(state, DataElements.FILTER_MODAL),
              selectors.getColorMap(state),
              selectors.getSelectedTab(state, TABS_ID),
              selectors.getAnnotationFilters(state),
              selectors.getIsMeasurementAnnotationFilterEnabled(state),
              selectors.getCustomNoteFilter(state),
            ]);
          
            const [t] = useTranslation();
            const dispatch = useDispatch();
          
            const [authors, setAuthors] = useState([]);
            const [annotTypes, setAnnotTypes] = useState([]);

Best Regards,
Darian