Additive list does not seem to respect maxItems value

[LobsterOfTruth]

Hello everyone,

I came across a problem that I can't seem to figure out on my own, so: first post here, thanks for reading! I'm trying to use an additive list for the settings page of my clock face. The way it's supposed to work is this: Users can select up to 4 sensor values to display on the clock face (there are 4 "slots") out of a list of, say, 6. 

I took the example out of the settings API with minor changes and reduced maxItems to 4, but the addAction ignores this and allows for all 6 selections. Am I misunderstanding the parameter?

<AdditiveList
  title="A list"
  settingsKey="select-list"
  maxItems="4"
  renderItem={
    ({ name, value }) =>
      <TextImageRow
        label={name}
        sublabel={value.location}
      />
  }
  addAction={
    <Select
      label="Add Item"
      options={[
        { name: 'Label1', value: {location: 'Sub-Label'} },
        { name: 'Label2', value: {location: 'Sub-Label'} },
        { name: 'Label3', value: {location: 'Sub-Label'} },
        { name: 'Label4', value: {location: 'Sub-Label'} },
        { name: 'Label5', value: {location: 'Sub-Label'} },
        { name: 'Label6', value: {location: 'Sub-Label'} }
      ]}
    />
  }
/>

[Tsjarly]

I am having similar issues, I don't know if I'm forgetting to add something somewhere, but I wanted to add max 10 items. 

I changed all of the requireds to false, except for 1. But when I run it in the simulator, label1 and label3 remain there, unable to remove.
Also, when I try to change the names from Label1 to an actual name, it doesn't render anymore at all and the settings page is completely white.
When I change the Sub-Label to an actual name it does change, but only in the part where you edit it. very strange..

[Gondwana]

Settings page completely white usually indicates an uncaught JS error or exception.

[Tsjarly]

why cant I post things anymore..
Sorry if it turns up 3 times at some point 😅

anyway,

{ name: 'Label1', required: true,  value: {location: 'Sub-Label', icon: 'https://tinyurl.com/ybbmpxxq'} },
{ name: 'Label2', required: false,  value: {location: 'Sub-Label', icon: 'https://tinyurl.com/ybbmpxxq'} },
{ name: 'Label3', required: false,  value: {location: 'Sub-Label', icon: 'https://tinyurl.com/ybbmpxxq'} },
{ name: 'Label4', required: false,  value: {location: 'Sub-Label', icon: 'https://tinyurl.com/ybbmpxxq'} },
{ name: 'Test', required: false, value: {location: 'Sub-Label', icon: 'https://tinyurl.com/ybbmpxxq'} }

works, but when I try to change Label1 or Label3, it goes blank.. These are also the two items that are selected by default for some reason, eventhough I set (Label3 at least) to not be required. Is there anything else besides the Settings index.jsx file that needs to be adapted for this to work? 

[LobsterOfTruth]

Hello Tsjarly,

I replied to you already this morning but my (long) post vanished. Please try to use a new unique name for the settingsKey of your additiveList. This should take care of the two weird persistent required options. It seems that the simulator has a bug to "remembers" required options for a given settingsKey.

Maybe my other post will surface again...

[Tsjarly]

Hi,

This indeed worked, thanks!
I am wondering what I need to do exactly to get the information from these settings to my main app file.
Do you perhaps have any idea on how to make that work? 😇

[LobsterOfTruth]

Sorry for the delay, but I wanted to make sure it worked before replying.

I followed the steps laid out here, especially in the last few code examples: https://dev.fitbit.com/build/guides/settings/

Basically, you need an event listener in your companion app to keep track of changes in the settings. If something changes, the value(s) get sent to the app on the device. The device app listens to incoming messages with new values for specific settings keys and you can use that event listener function to specify what to do with them.